利用CSS可以画多边形状的，比如平行四形，三角形，四边形，五边形，六边形等。具体方法参考下面的内容吧。

css里面最简单的就是画四边形了，这个经常用到，具体不再多说，直接上CSS代码。

CSS代码：

<style>
    .m {
        width: 200px;
        height: 100px;
        background-color: red;
        margin: auto;
    }
</style>
<div class="m"></div>

结果：

css画三角形需要利用边的宽度来实现，先定义边的宽度，再定义一条边的颜色，其它边的颜色为透明即可！

css代码：

<style>
    .m {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 100px solid transparent;
        margin: auto;
    }
</style>
<div class="m"></div>

结果：

注意：可以通过改边上下左右边框的颜色来定义三角形的方向，你也可以参考《css画三角形的方法》这篇文章来详细的了解画三角形的其它方法。

css画五边形有些麻烦，需要多个div元素配合以及使用相对定位，旋转等。

css代码：

<style>
    * {
        margin: 0;
    }
    #wrapper {
        position: relative;
        left: 100px;
        top: 100px;
    }
    .main1 {
        /*这里不用选装*/
    }
    .main2 {
        transform: rotate(72deg);
    }
    .main3 {
        transform: rotate(144deg);
    }
    .main4 {
        transform: rotate(216deg);
    }
    .main5 {
        transform: rotate(288deg);
    }
    .tool {
        width: 0px;
        height: 0px;
        border-right: 58px solid transparent;
        border-left: 58px solid transparent;
        border-bottom: 160px solid red;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<div id="wrapper">
    <div class="tool main1"></div> <!--这个元素不用选装--->
    <div class="tool main2"></div>
    <div class="tool main3"></div>
    <div class="tool main4"></div>
    <div class="tool main5"></div>
</div>

结果：

上面使用多个元素画出(拼接)了五边形，我们也可以参考上面的代码画出六边形！

CSS代码：

<style>
    *{
        margin: 0;
    }
    #wrapper {
        position: relative;
        top: 100px;
        left: 100px;
    }
    .main2 {
        transform: rotate(60deg);
    }
    .main3 {
        transform: rotate(120deg);
    }
    .main4 {
        transform: rotate(180deg);
    }
    .main5 {
        transform: rotate(240deg);
    }
    .main6 {
        transform: rotate(300deg);
    }
    .tool{
        width: 0px;
        height: 0px;
        border-right: calc(60px / 1.732) solid transparent;
        border-left: calc(60px / 1.732) solid transparent;
        border-bottom: 60px solid red;
        transform-origin: top;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<div id="wrapper">
    <div class="tool main1"></div> <!--这个元素不用选装--->
    <div class="tool main2"></div>
    <div class="tool main3"></div>
    <div class="tool main4"></div>
    <div class="tool main5"></div>
    <div class="tool main6"></div>
</div>

结果：

css 画多边形的方法有很多，自己可以多找找网上的教程，这里的方法只做为一个参考使用！