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/post/8717.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论