CSS3通过after伪类绘制六角星
2021年03月04日
635
CSS3通过after伪类绘制六角星
<div id="container"> <div class="star-six"></div> </div>
css 绘制 正三角形：
.star-six{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid yellow;
position: relative;
}如下所示：
css 绘制倒三角形：
.star-six::after{
content: '';
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid lightblue;
position: absolute;
top: 50px;
left: -100px;
}如下所示：
最后，调整两个图形的边框线的颜色为红色，效果如下所示：
