[[420151]]

今天要學習一下面試中常考的一個css題目，用css畫多邊形。這一次以三角形、四邊形、五邊形、六邊形為例，首先開始之前需要了解一些必要的知識。

一、基礎知識儲備

本次將利用純CSS知識來繪制一些形狀，為了繪制這些形狀，首先補習一下所需的CSS基礎知識點——css盒模型。

盒模型.png

由上圖可以看出標準的盒模型是由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來實現正方形，那么我們接下來實現一下矩形吧，根據所學過的數學知識我們只需用將正方形的調整正方形的長寬使其長≠寬即可，接下來讓我們來實現一下吧。

  width: 0px; 
  height: 0px; 
  border-bottom: 200px solid red; 
  border-left: 100px solid red; 
  border-right: 100px solid red; 
  border-top: 200px solid red; 
} 

效果如下圖所示：

矩形.png

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; 
} 

效果如下圖所示：

五邊形.png

實現五邊形的主要難點在于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; 
} 

好了，目前已經講述了三角形，四邊形，五邊形，六邊形得到實現方式了，更高的實現方式就以此類推了。