明天要学习一下面试中常考的一个css题目，用css画多边形。 这一次以三角形、四边形、五边形、六边形为例，首先开始之前须要理解一些必要的常识。（欢送关注公众号前端点线面）
一、基础知识储备
本次将利用纯CSS常识来绘制一些形态，为了绘制这些形态，首先补习一下所需的CSS根底知识点——css盒模型。
由上图能够看出规范的盒模型是由content，padding，border，margin组成的，咱们用代码看一下具体情况吧。
<!--HTML局部，此局部代码若是不变，前面将复用不在赘述--><div id="main"></div>/*css局部*/ #main { width: 100px; height: 100px; border: 200px solid red; }效果图如下：
二、实战
光说不练假把式，当初就由利用这些根本的CSS属性来绘制常见的三角形、四边形、五边形……
2.1 四边形
若是不能用间接应用background-color属性来画一个四边形，由上图咱们能够看出若是让content的宽高全副设为0，并设置border的宽高，那么咱们就能够失去一个仅由border形成的四边形了，四边形又分为正方形、平行四边形、矩形等等，这里就让咱们应用border来实现上述中的三种图形吧。
2.1.1 正方形
首先让咱们来实现一下最简略的正方形吧。
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid black; border-right: 200px solid blue; border-top: 200px solid pink;}成果如下图所示：
2.1.2 矩形
在2.1.1中咱们曾经实现了通过应用border来实现正方形，那么咱们接下来实现一下矩形吧，依据所学过的数学知识咱们只需用将正方形的调整正方形的长宽使其长≠宽即可，接下来让咱们来实现一下吧。
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 100px solid red; border-right: 100px solid red; border-top: 200px solid red;}成果如下图所示：
2.1.3 平行四边形
PS：平行四边形的实现须要应用两个三角形来实现，故此这里倡议先跳过，请先返回浏览2.2中查看三角形的实现，再折返查看此处的平行四边行的办法。
此处便默认您已浏览完了2.2的内容了，接下来实现一下平行四边形。
<div id="wrapper"> <div class="public"></div> <div class="public move"></div></div>*{ margin: 0;}#wrapper { position: relative;}.public { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 200px solid transparent; position: absolute;}.move { transform: rotate(180deg); top: 200px; left: 200px;}成果如下图所示：
2.2 三角形
目前为止，最为简略的四边形已实现，那么此时是不是曾经有感觉了呢！咱们接着往下走，既然border能够实现四边形，那么三角形按情理应该也不在话下，当然三角形外面也有很多很多品种，依照角划分，可分为锐角三角形、直角三角形、钝角三角形；上面别离来实现一下。
2.2.1 锐角三角形
首先咱们来看看在content的宽高都是0的状况下，border的left,right,top,bottom四个所占据的状况吧。
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid black; border-right: 200px solid blue; border-top: 200px solid pink;}}
效果图如下：
从图能够看出left,right,top,bottom都是占着一个三角形的状况，那么当咱们须要某个三角形时咱们只须要让其余三个三角形暗藏起来不就能够了，咱们能够用transparent属性值来暗藏border，那么来实现一下吧。
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 200px solid transparent;}成果如图所示：
2.2.2 直角三角形
到此咱们能够画出锐角三角形了，直角三角形咱们依据上上图能够失去，只有显示两个border边即可，代码试一下吧
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid red; border-right: 200px solid transparent; border-top: 200px solid transparent;}成果如图所示：
2.2.3 钝角三角形
上图证实了之前的想法的可行性了。那么接下来让咱们想想钝角三角形该怎么实现呢？依照之前的想法是不行的，那么咱们就须要扭转一下想法。
咱们能够用两个直角三角形，将小的直角三角形笼罩在大的下面，让咱们试一下吧！！
<div id="main1"></div><div id="main2"></div>#main1 { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid transparent;}#main2 { width: 0px; height: 0px; border-bottom: 200px solid black; border-left: 150px solid transparent; position: absolute; /*这里8px是浏览器中的margin自带的间距，之前没有解决*/ top: 8px; left: 58px;}效果图如下所示：
这次通过相对定位来管制小的直角三角形，那么咱们能够通过管制彩色三角形的色彩来显示钝角三角形。
2.3 五边形
三角形都曾经学会了，那么很多图形都能够通过三角形拼凑得来，就以五边形为例，这里将以多个三角形来画出五边形。
<div id="wrapper"> <div class="main1 tool"></div> <div class="main2 tool"></div> <div class="main3 tool"></div> <div class="main4 tool"></div> <div class="main5 tool"></div></div>*{ margin: 0;}#wrapper { position: relative; top: 300px; margin-left: 300px;}.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;}成果如下图所示：
实现五边形的次要难点在于border的三个边的取值，以及旋转的角度。
2.4 六边形
到目前为止三角行、四、五边形的三种模式都实现了一遍，他们均是通过border来实现的，那么让咱们来想一下怎么画出一个六边形，有条件的能够在纸上画画，咱们能够把一个五边形分成6个等边三角形，让咱们通过下面所学常识来实现一下六边形吧！
<div id="wrapper"> <div class="main1 tool"></div> <div class="main2 tool"></div> <div class="main3 tool"></div> <div class="main4 tool"></div> <div class="main5 tool"></div> <div class="main6 tool"></div></div>*{ margin: 0;}#wrapper { position: relative; top: 300px; margin-left: 300px;}.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;}通过下面的办法实现五边形，这边难点次要是画出等边三角形。
下面的办法曾经实现了，让咱们想想其余的办法实现一下吧，这里咱们将通过三个四边形实现五边形，让咱们一下试验一下吧！！
<div id="wrapper"> <div class="main1 tool"></div> <div class="main2 tool"></div> <div class="main3 tool"></div></div>*{ margin: 0;}#wrapper { position: relative; top: 300px; margin-left: 300px;}.main1 { width: calc(120px / 1.732); height: 120px; background-color: black;}.main2 { width: calc(120px / 1.732); height: 120px; transform: rotate(120deg); background-color: black;}.main3 { width: calc(120px / 1.732); height: 120px; transform: rotate(240deg); background-color: black;}.tool{ position: absolute; top: 0; left: 0;}好了，目前曾经讲述了三角形，四边形，五边形，六边形失去实现形式了，更高的实现形式就以此类推了。
1.如果感觉这篇文章还不错，来个分享、点赞吧，让更多的人也看到
2.欢送关注公众号前端点线面，《前端百题斩》pdf版在等你