绘制五角星和六角星

作者: 钢笔先生 | 来源:发表于2020-01-31 21:45 被阅读0次

绘制五角星和六角星
Python绘制分形树(一)
python绘制五角星
canvas效果案例：五角星
canvas-五角星
AI应用：绘制立体五角星
canvas由浅入深（二）：从三角形到五角星
默写例程第002天
jQuery五角星评分（end方法）
五角星绘制

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即可。

左右大，则顶角为钝角，反之是更小的锐角。