绘制五角星和六角星
2020-01-31 本文已影响0人
钢笔先生
Time: 20200131
五角星
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>五角星</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="star">
</div>
</body>
</html>
CSS
/* 画向上的三角形然后顺时针旋转 */
#star {
width: 0px;
height: 0px;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
/*使其居中*/margin: 150px auto;
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
position: relative; /*相对定位*/
}
/* 伪元素模拟一个层 */
#star::before {
content: '';
width: 0px;
height: 0px;
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
position: absolute;
/*相对于主元素是绝对定位*/
left: -65px;
top: -45px;
}
#star::after {
content: '';
width: 0px;
height: 0px;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
position: absolute;
/*相对于主元素是绝对定位*/
left: -105px;
top: 3px;
}
截屏2020-01-31下午9.43.07.png
六角星
这个画起来就更容易，是两个三角形的组合，一个向上，一个向下。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>六角星</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="star"></div>
</body>
</html>
CSS
#star {
width: 0px;
height: 0px;
margin: 150px auto;
border-bottom: 100px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
position: relative;
}
#star::before {
content: '';
/*这个是必须要有的，否则无法显示*/
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
position: absolute;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
top: 30px;
left: -60px;
}
重点还是在于如何画三角形。
简单来说画三角形就是：
#star {
width: 0px;
height: 0px;
margin: 150px auto;
border-bottom: 100px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
position: relative;
}
这是上三角，则设置底部大小和颜色，左右两边大小和颜色为透明即可。
上部不设置则大小为0，设置的话设置大小为0px即可。
左右大，则顶角为钝角，反之是更小的锐角。
截屏2020-01-31下午9.39.46.png
END.
