css画多边形的方法

发布时间：2022-12-25 13:38:32 来源：互联网

.

你长着一对翅膀。坚韧地飞吧，不要为风雨所折服;诚挚地飞吧，不要为香甜的蜜汁所陶醉。朝着明确的目标，飞向完美的人生。

利用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 画多边形的方法有很多，自己可以多找找网上的好代码教程，这里的方法只做为一个参考使用！

本文css画多边形的方法到此结束。生活中，我们没有必要为难自己，质疑自己，有时，我们无法很好地理解或学会某样事物，那只是我们思考与接收问题的角度不同罢了。每个人都有自己的泪要擦，每个人都有自己的路要走，只要记得：冷了，给自己加件外衣；饿了，给自己买个面包；痛了，给自己一份坚强；失败了，给自己一个目标；跌倒了，在伤痛中爬起，给自己一个宽容的微笑继续往前走，已足够！小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章: