css 不規則邊角 CSS實現各種形狀

2021-10-13 05:17:45 字數 1639 閱讀 1448

css3的乙個非常酷的特性是允許我們建立各種規則和不規則形狀的圖形,從而可以減少的使用。以前只能在photoshop等影象編輯軟體中製作的複雜圖形現在使用css3就可以完成了。通過使用新的css屬性,像transform和border-radius,我們可以建立非常漂亮和複雜的圖形效果。

圓形要使用css來製作乙個圓形,我們需要乙個div,被給它設定乙個id。

圓形在設定css時要設定寬度和高度相等,然後設定border-radius屬性為寬度或高度的一半即可:

正方形正方形是css圖形中最簡單的圖形之一,同樣使用乙個div,並設定乙個id。

正方形的css樣式只需要設定相同的寬度和高度即可。

長方形與正方形一樣,css長方形也非常簡單:

與正方形不同的是,長方形的長度和高度為不同的值。

橢圓形橢圓形是正圓形的乙個變體,同樣使用乙個帶id的div來製作。

設定橢圓形的css時,高度要設定為寬度的一半,border-radius屬性也要做相應的改變:

三角形要建立乙個css三角形,需要使用border,通過設定不同邊的透明效果,我們可以製作出三角形的現狀。另外,在製作三角形時,寬度和高度要設定為0。

倒三角形

與正三角形不同的是,倒三角形要設定的是border-top、border-left和border-right三條邊的屬性:

左三角形

左三角形操作的是border-top、border-left和border-right三條邊的屬性,其中上邊和下邊要設定透明屬性。

右三角形

右三角形操作的是border-bottom、border-left和border-right三條邊的屬性,其中上邊和下邊要設定透明屬性。

菱形製作菱形的方法有很多種。這裡使用的是transform屬性和rotate相結合,使兩個正反三角形上下顯示。

梯形梯形是三角形的乙個變體,設定css梯形時,左右兩條邊設定為相等,並且給它設定乙個寬度。

平行四邊形

平行四邊形的製作方式是使用transform屬性使長方形傾斜乙個角度。

星形星形的html結構同樣使用乙個帶id的空div。星形的實現方式比較複雜,主要是使用transform屬性來旋轉不同的邊。仔細體會下面的**。

六角星形

和五角星的製作方法不同,六角星形狀的製作方法是操縱border屬性來製作兩半圖形,然後合併它們。

五邊形建立css五邊形需要結合兩個圖形:乙個梯形,然後在它的上面放乙個三角形,共同組成乙個五邊形。

六邊形六邊形的製作方法可以有很多種,可以像五邊形一樣,先製作乙個長方形,然後在它的上面和下面各放置乙個三角形。

八角形八角形的製作方法也有多種方式,這裡使用的是先製作兩個相同的梯形,然後在兩邊分別放置乙個三角形。

心形心形的製作是非常複雜的,可以使用偽元素來製作,分別將偽元素旋轉不同的角度,並修改transform-origin屬性來元素的旋轉中心點。

蛋形蛋形時橢圓形的乙個變體,它的高度要比寬度稍大,並且設定正確的border-radius屬性即可以製作出乙個蛋形。

無窮符號

無窮符號可以通過border屬性和設定偽元素的角度來實現。

訊息提示框

訊息提示框可以先製作乙個圓角矩形,然後在需要的地方放置乙個三角形。

吃豆人吃豆人的製作方法是先在乙個圓形裡面製作乙個透明的三角形。

QT實現不規則窗體

看到網上有很多不規則窗體的實現,效果很酷.於是使用qt也實現了乙個,qt的不規則窗體實現非常簡單,只需要設定乙個mask 遮掩 這個的格式可以使用png或bmp格式,我使用了png格式,預設窗體是矩形的,使用png影象,將需要隔離在窗體之外的區域的畫素設定為白色或透明色,其他顏色的區域對應顯示出來的...

GDI 實現不規則窗體

先來看一下實現的效果,下圖中那個娃娃就是我們要實現的不規則窗體啦 使用gdi 還需要進行初始化 在應用初始化時,啟動gdi 在程式退出時,關閉gdi png是實現不規則窗體的關鍵,因為它本身就是帶透明效果的,把這種格式的作為窗體本身就是不規則的。首先我們需要載入這張,在這裡我沒有將其作為資源新增到專...

CSS各種居中實現方式

css居中是每次布局都需要面對的問題,但是同乙個居中方法並不是任何元素都能使用的,內聯元素和塊級元素的居中方式各不相同,下面我就對它們分別進行討論和總結。以下例項都是基於下面的html class out class in 居中元素 span div 父元素樣式設定為text align cente...