CSS可以幫助我們繪制各種形狀,例如圓形、矩形、三角形等等。下面我們來看看具體怎么實現。
/* 實現矩形 */ .rectangle { width: 100px; height: 50px; background-color: #333; } /* 實現圓形 */ .circle { width: 50px; height: 50px; border-radius: 50%; background-color: #333; } /* 實現三角形 */ .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #333; } /* 實現五角星 */ .star { display: block; position: relative; width: 0; height: 0; margin: 50px auto; border: 50px solid transparent; border-bottom-color: #333; transform: rotate(35deg); } .star:after { content: ''; display: block; position: absolute; top: -110px; left: -40px; width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #333; transform: rotate(-70deg); }
以上代碼實現了矩形、圓形、三角形和五角星。其中,矩形只需要設置寬高和背景顏色即可;圓形需要使用border-radius屬性設置圓角半徑;三角形則需要使用border實現,同時需要設置一個邊框為透明色,以保證三角形的尖端;五角星需要設置偽元素after,實現5個三角形拼接而成的效果。
以上四種形狀只是CSS可以繪制出的一部分,通過設置不同的CSS屬性和值,可以繪制出更多種不同的形狀。應用CSS來設置形狀,可以為我們的網頁增添更多的創意和美感。