共计 4747 个字符，预计需要花费 12 分钟才能阅读完成。
明天要学习一下面试中常考的一个 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 版在等你
