【前端幫幫忙】第3期使用CSS的border屬性繪製各種幾何形狀

大志設計_專注Web前端開發發表於2019-02-22

前言

border邊框屬性可以說是我們在網頁佈局中最常用不過的一個屬性之一。border它不只是邊框，它還有很多非常有用的“黑魔法”哈，讓我們一起來學習一下。

border繪製幾何形狀的原理

我們先來看一個簡單的小例子：

在頁面上寫一個div

<div class="border-test"><div>
複製程式碼

給這個div加上以下樣式

.border-test {
  width: 200px;
  height: 200px;
  background-color: #000;
  border-top: 50px solid red;
  border-right: 50px solid yellow;
  border-bottom: 50px solid blue;
  border-left: 50px solid green;
}
複製程式碼

在瀏覽器預覽可以看到下面的效果

接下來，我們把這個div的寬度跟高度都設為0，看看是什麼效果

是不是剩下4個不同顏色不同方向的三角形了，繼續往下看，一起來見證下border的黑魔法。

border能繪製什麼幾何形狀？

三角形
梯形
平行四邊形
五邊形
六邊形
八邊形
五角星
六角星
...

三角形

向上的三角形

要得到向上的三角形，是不是隻要設定上邊框的寬度為0，設定上邊框、左邊框、右邊框的邊框顏色設為transparent透明，保留下邊框的邊框顏色就可以了，看程式碼：

<div class="triangle triangle-up"></div>
複製程式碼

// 公共
.triangle {
    width: 0;
    height: 0;
}

// 向上的三角形
.triangle-up {
    border-top: 0 solid transparent; // 這句這可以省略
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    border-left: 50px solid transparent;
}
複製程式碼

還可以簡寫成，遵循上右下左順序來設定

.triangle-up {
    border-width: 0 50px 50px;  // 邊框大小
    border-style: solid;  // 邊框樣式
    border-color: transparent transparent blue;  // 邊框顏色
}
複製程式碼

下面程式碼都會用簡寫的形式。

向右的三角形

同理，設定右邊框的寬度為0，設定上邊框、右邊框、下邊框的邊框顏色為透明，保留左邊框的邊框顏色就可以了

<div class="triangle triangle-right"></div>
複製程式碼

.triangle-right {
    border-width: 50px 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent transparent green;
}
複製程式碼

向下的三角形

同理，設定下邊框的寬度為0，設定左邊框、右邊框、下邊框的邊框顏色為透明，保留上邊框的邊框顏色就可以了

<div class="triangle triangle-bottom"></div>
複製程式碼

.triangle-bottom {
    border-width: 50px 50px 0;
    border-style: solid;
    border-color: red transparent transparent;
}
複製程式碼

向左的三角形

同理，設定左邊框的寬度為0，設定上邊框、下邊框、左邊框的邊框顏色為透明，保留右邊框的邊框顏色就可以了

<div class="triangle triangle-left"></div>
複製程式碼

.triangle-left {
    border-width: 50px 50px 50px 0;
    border-style: solid;
    border-color: transparent yellow transparent transparent;
}
複製程式碼

接下來再來看下如何實現下面的三角形呢？

其實不難發現，向左上的三角形剛好是向下的三角形的右半部分，所以要得到這個圖形，是不是隻要把向下的三角形左半部分的邊框設為0就可以了，看程式碼：

<div class="triangle triangle-top-left"></div>
複製程式碼

.triangle-top-left {
    border-width: 50px 50px 0 0;
    border-style: solid;
    border-color: red transparent transparent;
}
複製程式碼

同理，可得到其他三個不同方向三角形，程式碼如下：

.triangle-top-right {
    border-width: 50px 0 0 50px;
    border-style: solid;
    border-color: red transparent transparent;
}

.triangle-bottom-left {
    border-width: 0 50px 50px 0;
    border-style: solid;
    border-color: transparent transparent blue;
}

.triangle-bottom-right {
    border-width: 0 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent blue;
}
複製程式碼

##梯形

藉助上面的實現三角形的方法，我們可以很容易的實現梯形，比如下面這個：

向上的梯形：

其實只要把上面向上的三角形的程式碼加上寬度就能實現了

.trapezoid {
  width: 60px;
  border-bottom: 60px solid red;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}
複製程式碼

同理，可以得到向下的梯形

.trapezoid-bottom {
    width: 50px;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
複製程式碼

如果要得到向左和向右的梯形，需要把width設為0，然後設定相應的高度值。

.trapezoid-left {
    width: 0;
    height: 50px;
    border-width: 50px 50px 50px 0;
    border-style: solid;
    border-color: transparent red transparent transparent;
}

.trapezoid-right {
    width: 0;
    height: 50px;
    border-width: 50px 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent transparent red;
}
複製程式碼

平行四邊形

只要一個向上的三角形跟向下的三角形結合起來就能實現，需要配合一個偽元素。

.parallelogram {
    position: relative;
    width: 0;
    height: 0;
    border-width: 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent red;
}

.parallelogram:after {
    position: absolute;
    top: 0;
    left: 0;
    border-width: 50px 50px 0;
    border-style: solid;
    border-color: red transparent transparent;
    content: "";
}
複製程式碼

五邊形

梯形加上一個三角形，很容易就能組合成一個五邊形，也需要配合一個偽元素來實現。

.pentagon {
    position: relative;
    width: 50px;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.pentagon:after {
    position: absolute;
    top: 50px;
    left: -50px;
    width: 0;
    height: 0;
    border-width: 75px 75px 0;
    border-style: solid;
    border-color: red transparent transparent;
    content: "";
}
複製程式碼

六邊形

如果兩個相反方向且底邊同樣大小的梯形，疊加在一起，是不是就能得到一個六邊形呢？同樣需要配合一個偽元素來實現。

.hexagon {
    position: relative;
    width: 50px;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon:after {
    position: absolute;
    top: 50px;
    left: -50px;
    width: 50px;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    content: "";
}
複製程式碼