星CSS形狀是一種可以通過CSS編碼創(chuàng)造出各種星形填充和邊框的技巧。它通過利用CSS的偽元素,例如:before和:after,來創(chuàng)建不同形狀的星星。
下面是一個基本的星形CSS:
.star { position: relative; display: inline-block; width: 0; height: 0; border-right: 30px solid transparent; border-bottom: 20px solid #f1c40f; border-left: 30px solid transparent; transform: rotate(35deg); margin-right: 10px; margin-left: 10px; }
上述CSS代碼可以形成一個簡單的五角星。代碼中,我們使用了三條邊框,并通過旋轉(zhuǎn)角度來使其成為一個星星的形狀。
接下來,我們將代碼修改,增加偽元素,變成下面這樣:
.star { position: relative; display: inline-block; width: 0; height: 0; border-right: 30px solid transparent; border-bottom: 20px solid #f1c40f; border-left: 30px solid transparent; transform: rotate(35deg); margin-right: 10px; margin-left: 10px; } .star:before { content: ""; position: absolute; top: -10px; left: -30px; width: 0; height: 0; border-right: 30px solid transparent; border-bottom: 20px solid #f1c40f; border-left: 30px solid transparent; transform: rotate(-35deg); } .star:after { content: ""; position: absolute; top: -10px; left: 30px; width: 0; height: 0; border-right: 30px solid transparent; border-bottom: 20px solid #f1c40f; border-left: 30px solid transparent; transform: rotate(-35deg); }
這個CSS代碼將會創(chuàng)建一個完整的五角形星。我們在原有的CSS基礎(chǔ)上,使用:before和:after來創(chuàng)建兩個三角形,從而組成完整的五角星形狀。我們也可以通過調(diào)整邊框的寬度和高度以及子元素的位置來創(chuàng)造更多變化的星形。