css复杂图形五角星的写法

时间：5年前阅读：5915

一个大三角形底部掏掉一个小三角形；两个前面的相同图形叠压

　　经计算，五角星的夹角为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,我们将及时处理。

微信扫码关注

更新实时通知

css复杂图形五角星的写法

网友评论