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

前言

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: "";
}
複製代碼

實戰應用

聊天氣泡

是否是用到了向下的三角形結合一個圓角矩形來實現。

下拉菜單

咱們打開淘寶天貓，來看下它頂部的下拉菜單，是否是也用到向上的三角形和向下的三角形。

咱們來看下它的實現代碼：

再來看一個，咱們打開京東秒殺

是否是就用到了咱們上面分析的平行四邊形來實現的，咱們一樣來看下它的實現代碼：

就是經過一個矩形，而後配合兩個僞元素的三角形結合起來實現的。

具體使用場景還有不少，你們能夠根據本身平時項目開發中的實際需求來發揮想象。

能用CSS樣式搞定的效果就不要使用圖片哈，不只有利於後期的維護，也能減小網頁的請求，提升頁面的加載速度。

總結

其實經過各類組合，還能夠實現不少不一樣的形狀，這裏就不一一列舉了。好比還能夠實現八邊形、五角星、六角星、八角星、十二角星等等，border就是這麼強大。

參考

www.cnblogs.com/lhb25/p/css…

www.mamicode.com/info-detail…

關注

歡迎你們關注個人公衆號，感謝！