css复杂图形五角星的写法
时间:5年前 阅读:5929
一个大三角形底部掏掉一个小三角形;两个前面的相同图形叠压
经计算,五角星的夹角为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,我们将及时处理。
微信扫码关注
更新实时通知
网友评论