小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

在前面的文章中我们绘制了三角形和梯形，这篇文章我们来讲一下五边形的绘制。

容器

<div class="pentagon"></div>

绘制五边形我们准备一个div元素足以，接下来就是它的变身时刻。

样式

横看成岭侧成峰，换个样式便不同。看的角度不同，看到的效果也就不同；样式发生变化的时候，图形自然也会变。

五边形

绘制五边形的思路是一个梯形和一个三角形拼接而成，如下：

.pentagon {
    --bw: 50px;
    width: calc(var(--bw) * 2);
    height: 0;
    border-left: var(--bw) solid transparent;
    border-right: var(--bw) solid transparent;
    border-top: calc(var(--bw) * 2) solid red;
    position: relative;
}

.pentagon::before {
    content: '';
    position: absolute;
    --w: calc(var(--bw) * 2);
    border-left: var(--w) solid transparent;
    border-right: var(--w) solid transparent;
    border-bottom: var(--w) solid red;
    top: calc(var(--w) * -2);
    left: calc(var(--w) * -0.5);
}

自身元素是个梯形，利用其伪元素设置为三角形，然后进行位置调整得到五边形。改变--bw的值可以改变五边形的大小，如果不想要此形状的五边形，可以改变border的每个宽度。

钻石五边形

如果我们把上述图案旋转，三角形拉长，梯形变低，像不像一个钻石呢，与上述的样式变化地方如下：

.pentagon{
    /* 三角形拉长 */
    border-top: var(--bw) solid red;  
    transform: rotate(180deg);
}

.pentagon::before {
    /* 梯形变化 */
    border-bottom: calc(var(--w) * 1.5) solid red;
    top: calc(var(--w) * -2);
}

改变--bw的值可以改变钻石的大小。

总结ix

绘制五边形的思路是一个梯形和一个三角形拼接而成，那么六边形、八边形、十二边形呢，大家可以试一试，这些图形都可以根据三角形和四边形拼接得到。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。