CSS 可以用來寫花瓣,而這也是一種很好的練習(xí) CSS 技巧的方法。下面我們就來看看如何通過 CSS 寫花瓣。
.petal { width: 0; height: 0; border-style: solid; border-width: 30px 15px 0 15px; border-color: #ff9c9c transparent transparent transparent; border-radius: 15px; position: absolute; transform: rotate(45deg); } .petal:before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 10.6px 0 10.6px; border-color: #ffffff transparent transparent transparent; border-radius: 10.6px; position: absolute; top: -30px; left: -14.4px; } .petal:after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 10.6px 0 10.6px; border-color: #ffffff transparent transparent transparent; border-radius: 10.6px; position: absolute; top: -30px; left: 14.4px; }
通過這段代碼,我們可以得到一個(gè)花瓣的形狀。其中,.petal 是花瓣的樣式,它的寬度和高度都為 0,并且采用了旋轉(zhuǎn) transform。.petal:before 和 .petal:after 是在花瓣中間添加了兩個(gè)小三角形,使花瓣更加逼真。
通過組合多個(gè)花瓣,可以得到一朵完整的花。下面是一個(gè)實(shí)現(xiàn)樣例:
.flower { position: relative; width: 100px; height: 100px; margin: 50px auto; } .petal1 { left: 15px; top: 30px; } .petal2 { left: 35px; top: 11px; transform: rotate(30deg); } .petal3 { left: 65px; top: 11px; transform: rotate(-30deg); } .petal4 { left: 85px; top: 30px; transform: rotate(180deg); } .petal5 { left: 50px; top: 60px; transform: rotate(60deg); } .petal6 { left: 50px; top: 11px; transform: rotate(-60deg); }
通過這些樣式,可以組成一朵形狀逼真的花。你也可以嘗試使用不同的樣式和變換,創(chuàng)造出你自己的花瓣效果。