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

CSS画四边形的方法

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

CSS代码:

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

结果:

css画多边形的方法

CSS画三角形的方法

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画三角形的方法》这篇文章来详细的了解画三角形的其它方法。

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画五边形的方法

CSS画六边形的方法

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

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画六边形的方法

PS:

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