使用css3在網(wǎng)頁中實現(xiàn)五角星樣式的方法-創(chuàng)新互聯(lián)

小編給大家分享一下使用css3在網(wǎng)頁中實現(xiàn)五角星樣式的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的順昌網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

我們平時在web網(wǎng)頁中看到的各種圖形包括正方形，長方形，三角形，圓形等，大部分是使用css3或者背景圖片來實現(xiàn)的，但是在開發(fā)的過程中，使用背景圖片的截取有著很多的不足，比如圖片需要占用額外的請求，對圖片像素要求較高等，所以當下css3成為比較主流的實現(xiàn)方法?，F(xiàn)在我們通過畫出五角星來向大家展示一下偽元素和transform用法。

使用css3實現(xiàn)五角星樣式的原理

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

css3偽元素

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

css3的新屬性transform

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

使用css3實現(xiàn)五角星樣式的步驟以及實現(xiàn)代碼

步驟一：創(chuàng)建一個三角形

.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實現(xiàn)五角星樣式效果如圖所示

以上是使用css3在網(wǎng)頁中實現(xiàn)五角星樣式的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文標題：使用css3在網(wǎng)頁中實現(xiàn)五角星樣式的方法-創(chuàng)新互聯(lián)
當前URL：http://muchs.cn/article2/cspdic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、靜態(tài)網(wǎng)站、ChatGPT、小程序開發(fā)、企業(yè)建站、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)