使用css3在網頁中實作五角星樣式（原理解析）

這篇文章帶給大家的內容是關於使用css3在網頁中實現五角星樣式，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

我們平常在web網頁中看到的各種圖形包括正方形，長方形，三角形，圓形等，大部分是使用css3或背景圖片來實現的，但是在開發的過程中，使用背景圖片的截取有許多的不足，例如圖片需要佔用額外的請求，對圖片像素要求較高等，所以當下css3成為比較主流的實現方法。現在我們透過畫出五角星來向大家展示偽元素和transform用法。

使用css3實作五角星樣式的原理

#我們先使用大尺寸邊線而零內容尺寸的元素來實現一個三角形樣式（詳情請關注 使用css3在網頁中實現各種三角形樣式集合），然後使用偽元素:after和:before來克隆2個同樣大小的三角形，最後將這2個偽元素分別套用不同的旋轉變換，實現五角星的樣式。

css3偽元素

#CSS的主要目的是為HTML元素添加樣式，事實上CSS中有一個特性允許我們添加額外元素而不擾亂文檔本身，這就是偽元素。一開始偽元素的語法是使用“:”，但是在CSS3修訂後的偽元素統一使用“::”用以區分偽元素和偽類（比如:hover，:active等）。本文將會引用:before和:after兩個偽元素，:before將會在內容之前添加一個元素而:after將會在內容後面添加一個元素（在它們之中添加內容我們可以使用content屬性）。

css3的新屬性transform

#transform屬性向元素套用2D或3D的轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。本文將使用transform將克隆之後的兩個三角形分別進行不同方向的旋轉。

使用css3實作五角星樣式的步驟以及實作程式碼

步驟一：建立一個三角形

.tri {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

步驟二：我們使用偽元素:after和:before來複製2個同樣大小的三角形

.tri:after,.tri:before {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

步驟三：將上述2個偽元素分別進行方向不同的70°旋轉變換

.tri:before {
    transform: rotate(70deg);
}
.tri:after {
    transform: rotate(-70deg);
}

使用css3實作五角星樣式效果如圖所示

##

以上是使用css3在網頁中實作五角星樣式（原理解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！