你长着一对翅膀。坚韧地飞吧，不要为风雨所折服;诚挚地飞吧，不要为香甜的蜜汁所陶醉。朝着明确的目标，飞向完美的人生。
利用CSS可以画多边形状的，比如平行四形，三角形，四边形，五边形，六边形等。具体方法参考下面的内容吧。
CSS画四边形的方法
css里面最简单的就是画四边形了，这个经常用到，具体不再多说，直接上CSS代码。
CSS代码：
<style>
.m {
width: 200px;
height: 100px;
background-color: red;
margin: auto;
}
</style>
<div class="m"></div>结果：
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画五边形有些麻烦，需要多个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代码：
<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>结果：
PS：
css 画多边形的方法有很多，自己可以多找找网上的好代码教程，这里的方法只做为一个参考使用！
本文css画多边形的方法到此结束。生活中，我们没有必要为难自己，质疑自己，有时，我们无法很好地理解或学会某样事物，那只是我们思考与接收问题的角度不同罢了。每个人都有自己的泪要擦，每个人都有自己的路要走，只要记得：冷了，给自己加件外衣；饿了，给自己买个面包；痛了，给自己一份坚强；失败了，给自己一个目标；跌倒了，在伤痛中爬起，给自己一个宽容的微笑继续往前走，已足够！小编再次感谢大家对我们的支持！
