今天我们就用css3来画五角星跟六角星,里面用到了css3的伪元素还有三角形组合起来的
五角星
分三部分,两个钝角三角形在下面叠加在一起,上面一个三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五角星和六角星</title>
</head>
<body>
<div class="star"></div>
</body>
<style>
.star{
width:0px;
height:0px;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
margin: 100px auto;
position: relative;
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star::before{
content: "";
width:0px;
height:0px;
border-bottom: 70px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: -40px;
left:-60px;
transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star::after{
content: "";
width:0px;
height:0px;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
position: absolute;
top: 0px;
left:-100px;
transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
</style>
</html>
六角星
通过两个三角形叠加在一起然后实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五角星和六角星</title>
</head>
<body>
<div class="star"></div>
</body>
<style>
.star{
width:0px;
height:0px;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
margin: 100px auto;
position: relative;
}
.star::before{
content: "";
width:0px;
height:0px;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: absolute;
top: 30px;
left:-50px;
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
</style>
</html>