绘制五边形和六边形

Time: 20200131

绘制图形的套路就是，先拆分，然后再画基本的元素，考虑如何用旋转，变形完成。

最基础的就是如何绘制三角形，这也是相对来说比较难的一个点。

五边形的拆解

截屏2020-01-31下午9.47.01.png

拆分为一个三角形和一个梯形。

梯形还可以再拆分，但是我们可以直接画出梯形来。

HTML

CSS

#pentagon {
    /* 先画三角形 */
    width: 0px;
    height: 0px;
    margin: 150px auto;
    border-top: 0px solid red;
    border-bottom: 100px solid red;
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    position: relative;
}

/* 再画梯形 */
#pentagon::before {
    content: '';
    width: 260px;
    height: 0px;
    position: absolute; /*相对于主元素绝对位置*/
    border-top: 160px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: 100px;
    left: -160px;
}

显示效果

截屏2020-01-31下午10.05.14.png

六边形

拆分为三角形 + 正方形 + 三角形。

HTML

CSS

#hexagon {
    width: 0px;
    height: 0px;
    margin: 150px auto;
    border-bottom: 100px solid red;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    position: relative;
}
/* 正方形 */
#hexagon::before {
    content: '';
    width: 300px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 100px;
    left: -150px;
}

#hexagon::after {
    content: '';
    width: 0px;
    height: 0px;
    margin: 150px auto;
    border-top: 100px solid red;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    position: absolute;
    left: -150px;
    top: 50px;
}

总之，用CSS3画了这么一堆东西，都是在练习使用拆解 + 基本元素绘制，变形，旋转，位置设定，伪元素等综合使用。

显示效果：

截屏2020-01-31下午10.26.48.png

END.