CSS3是一種新的Web技術,使得網頁的設計變得更加美觀和豐富多彩。在CSS3中,我們可以通過代碼簡單地畫出五角星!下面是代碼示例:
.star { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 35px solid #3dadeb; border-left: 50px solid transparent; position: relative; top: -10px; } .star:before { content: ""; position: absolute; top: 15px; left: -50px; width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 35px solid #3dadeb; border-left: 50px solid transparent; transform: rotate(35deg); } .star:after { content: ""; position: absolute; top: 15px; left: 0; width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 35px solid #3dadeb; border-left: 50px solid transparent; transform: rotate(-35deg); }
通過上面的代碼,我們可以創建一個帶有陰影效果的五角星。在這里,我們使用了多個css3屬性,如border、before、after、position、transform等等。這個例子顯示了css3的強大和靈活性。我們可以自由地去調整這段代碼,以創建我們需要的任何形狀和效果。
上一篇css3寫扇形