CSS3是一種用于網頁設計的樣式表語言,它可以很方便地實現各種特效。其中,通過CSS3可以繪制出漂亮的星星,這里就來介紹一下如何使用CSS3來畫星星。
.star { margin: 0; padding: 0; list-style: none; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 70px solid #ffc600; position: absolute; transform: rotate(35deg); } .star:before { content: ""; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 70px solid #ffc600; position: absolute; top: -40px; left: -55px; } .star:after { content: ""; width: 70px; height: 70px; position: absolute; top: 2px; left: -38px; background: #ffc600; transform: rotate(70deg); border-radius: 50px 0 0 0; }
上面的代碼就實現了畫一個黃色五角星的效果。我們將這個CSS樣式放在一個HTML文檔中,可以看到如下的效果:
如果需要畫其他顏色或者大小的五角星,只需要修改相應的屬性值即可。