css复杂图形五角星的写法
一个大三角形底部掏掉一个小三角形；两个前面的相同图形叠压
经计算，五角星的夹角为36度，若小三角形的侧边为a，则大三角形的侧边为2a(1+sin18)，两个三角形共同的底边为2a(sin54)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ position: relative; } .in{ margin-left: 100px; position: relative; width: 0px; border: 10px solid transparent; border-width: 249px 81px; border-bottom-color: red; position: absolute; } .in:after{ content: ""; position:absolute; border: 10px solid transparent; border-width: 59px 81px; border-bottom-color: white; top: 133px; left: -81px; } .in:last-child{ top: 100px; left: -134px; transform: rotate(-73deg); } </style> </head> <body> <div class="box"> <div class="in"></div> <div class="in"></div> </div> </body> </html> 效果图：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知