CSS3星是通過CSS3技術實現的一個具有美麗外觀的星形圖案。通過CSS3的新屬性能夠輕松的繪制出彩色的星形,使得網頁更加的美觀。
.star { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 35px solid #1abc9c; border-left: 50px solid transparent; transform: rotate(35deg); } .star:before { content: ""; width: 0; height: 0; position: absolute; top: -17px; left: -50px; border-right: 50px solid transparent; border-bottom: 35px solid #1abc9c; border-left: 50px solid transparent; } .star:after { width: 0; height: 0; border-top: 35px solid #1abc9c; border-left: 50px solid transparent; border-right: 50px solid transparent; position: absolute; content: ""; top: 18px; left: -50px; transform: rotate(-35deg); }
以上是通過CSS3繪制一個普通的星形,實現思路就是通過調整三角形的旋轉角度來達到最終效果。可以通過修改寬度、高度,以及邊框的顏色、粗細來實現各種不同的星形造型。此外,通過多個星形的拼接還能夠創建出更加復雜的圖案,增強網頁視覺效果。
上一篇css3替換復選框樣式
下一篇css3時鐘數字時鐘