19
2019
03

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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。