css常見問題：如何畫多邊形（三角形~六邊形）

利用純CSS如何畫出多邊形？本篇文章就來跟大家介紹一下從純CSS畫三角形開始，介紹一下畫四邊形、五邊形、六邊形的方法，更高的實現方式也可以此類推畫出來，希望對大家有所幫助！

今天要學習一下面試中常考的一個css題目，用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;
}

好了，目前已经讲述了三角形，四边形，五边形，六边形得到实现方式了，更高的实现方式就以此类推了。

原文地址：https://juejin.cn/post/7001772184498601991

作者：执鸢者

更多编程相关知识，请访问：编程入门！！

以上是css常見問題：如何畫多邊形（三角形~六邊形）的詳細內容。更多資訊請關注PHP中文網其他相關文章！