[[420151]]

今天要學(xué)習(xí)一下面試中?？嫉囊粋€css題目，用css畫多邊形。這一次以三角形、四邊形、五邊形、六邊形為例，首先開始之前需要了解一些必要的知識。

一、基礎(chǔ)知識儲備

本次將利用純CSS知識來繪制一些形狀，為了繪制這些形狀，首先補(bǔ)習(xí)一下所需的CSS基礎(chǔ)知識點(diǎn)——css盒模型。

盒模型.png

由上圖可以看出標(biāo)準(zhǔn)的盒模型是由content，padding，border，margin組成的，我們用代碼看一下具體情況吧。

<!--HTML部分，此部分代碼若是不變，后面將復(fù)用不在贅述--> 
<div id="main"></div> 

/*css部分*/  
#main {  
  width: 100px; 
  height: 100px; 
  border: 200px solid red;  
} 

效果圖如下：

二、實(shí)戰(zhàn)

光說不練假把式，現(xiàn)在就由利用這些基本的CSS屬性來繪制常見的三角形、四邊形、五邊形……

2.1 四邊形

若是不能用直接使用background-color屬性來畫一個四邊形，由上圖我們可以看出若是讓content的寬高全部設(shè)為0，并設(shè)置border的寬高，那么我們就可以得到一個僅由border構(gòu)成的四邊形了，四邊形又分為正方形、平行四邊形、矩形等等，這里就讓我們使用border來實(shí)現(xiàn)上述中的三種圖形吧。

2.1.1 正方形

首先讓我們來實(shí)現(xiàn)一下最簡單的正方形吧。

#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中我們已經(jīng)實(shí)現(xiàn)了通過使用border來實(shí)現(xiàn)正方形，那么我們接下來實(shí)現(xiàn)一下矩形吧，根據(jù)所學(xué)過的數(shù)學(xué)知識我們只需用將正方形的調(diào)整正方形的長寬使其長≠寬即可，接下來讓我們來實(shí)現(xiàn)一下吧。

  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：平行四邊形的實(shí)現(xiàn)需要使用兩個三角形來實(shí)現(xiàn)，故此這里建議先跳過，請先前往閱讀2.2中查看三角形的實(shí)現(xiàn)，再折返查看此處的平行四邊行的方法。

此處便默認(rèn)您已閱讀完了2.2的內(nèi)容了，接下來實(shí)現(xiàn)一下平行四邊形。

<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 三角形

目前為止，最為簡單的四邊形已完成，那么此時是不是已經(jīng)有感覺了呢!我們接著往下走，既然border可以實(shí)現(xiàn)四邊形，那么三角形按道理應(yīng)該也不在話下，當(dāng)然三角形里面也有很多很多種類，按照角劃分，可分為銳角三角形、直角三角形、鈍角三角形;下面分別來實(shí)現(xiàn)一下。

2.2.1 銳角三角形

首先我們來看看在content的寬高都是0的情況下，border的left,right,top,bottom四個所占據(jù)的情況吧。

#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都是占著一個三角形的情況，那么當(dāng)我們需要某個三角形時我們只需要讓其他三個三角形隱藏起來不就可以了，我們可以用transparent屬性值來隱藏border，那么來實(shí)現(xiàn)一下吧。

#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 直角三角形

到此我們可以畫出銳角三角形了，直角三角形我們根據(jù)上上圖可以得到，只要顯示兩個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 鈍角三角形

上圖證實(shí)了之前的想法的可行性了。那么接下來讓我們想想鈍角三角形該怎么實(shí)現(xiàn)呢?按照之前的想法是不行的，那么我們就需要改變一下想法。

我們可以用兩個直角三角形，將小的直角三角形覆蓋在大的上面，讓我們試一下吧!!

<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 五邊形

三角形都已經(jīng)學(xué)會了，那么很多圖形都可以通過三角形拼湊得來，就以五邊形為例，這里將以多個三角形來畫出五邊形。

<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

實(shí)現(xiàn)五邊形的主要難點(diǎn)在于border的三個邊的取值，以及旋轉(zhuǎn)的角度。

2.4 六邊形

到目前為止三角行、四、五邊形的三種形式都實(shí)現(xiàn)了一遍，他們均是通過border來實(shí)現(xiàn)的，那么讓我們來想一下怎么畫出一個六邊形，有條件的可以在紙上畫畫，我們可以把一個五邊形分成6個等邊三角形，讓我們通過上面所學(xué)知識來實(shí)現(xiàn)一下六邊形吧!

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

通過上面的方法實(shí)現(xiàn)五邊形，這邊難點(diǎn)主要是畫出等邊三角形。

上面的方法已經(jīng)實(shí)現(xiàn)了，讓我們想想其他的方法實(shí)現(xiàn)一下吧，這里我們將通過三個四邊形實(shí)現(xiàn)五邊形，讓我們一下實(shí)驗(yàn)一下吧!!

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

好了，目前已經(jīng)講述了三角形，四邊形，五邊形，六邊形得到實(shí)現(xiàn)方式了，更高的實(shí)現(xiàn)方式就以此類推了。