CSS3画五角星
CSS3画五角星
html:
<div class="star"></div>
css:
<style>
body{
margin: 0;
}
/* 注意：
红色三角形的顶点，是这个图像的左上角的点（也是其他图形，进行定位的参考点）
*/
.star{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 70px solid red;
border-right: 100px solid transparent;
position: relative;
margin: 200px;
outline: 1px dashed green;
transform: rotate(36deg);
}
/* */
.star::before{
content: '';
display: block;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 70px solid blue;
border-right: 100px solid transparent;
position: relative;
left: -103px;
top: 2px;
outline: 1px dashed green;
transform: rotate(290deg);
}
.star::after{
content: '';
display: block;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 70px solid yellow;
border-right: 100px solid transparent;
position: relative;
left: -98px;
top: -67px;
outline: 1px dashed green;
transform: rotate(74deg);
}
</style>预览：
