使用CSS的border屬性繪制各種幾何形狀的方法

發(fā)布時(shí)間：2019-03-01 15:56:03 作者：dazhi

這篇文章主要介紹了使用CSS的border屬性繪制各種幾何形狀的方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

border 邊框?qū)傩钥梢哉f(shuō)是我們?cè)诰W(wǎng)頁(yè)布局中最常用不過(guò)的一個(gè)屬性之一。 border 它不只是邊框，它還有很多非常有用的“黑魔法”哈，讓我們一起來(lái)學(xué)習(xí)一下。

border繪制幾何形狀的原理

我們先來(lái)看一個(gè)簡(jiǎn)單的小例子：

在頁(yè)面上寫(xiě)一個(gè) div

<div class="border-test"><div>

給這個(gè) 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;
}

在瀏覽器預(yù)覽可以看到下面的效果

接下來(lái)，我們把這個(gè) div 的寬度跟高度都設(shè)為 0 ，看看是什么效果

是不是剩下4個(gè)不同顏色不同方向的三角形了，繼續(xù)往下看，一起來(lái)見(jiàn)證下 border 的黑魔法。

border能繪制什么幾何形狀？

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

三角形

向上的三角形

要得到向上的三角形，是不是只要設(shè)置 上邊框 的寬度為 0 ，設(shè)置 上邊框 、 左邊框 、 右邊框 的邊框顏色設(shè)為 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;
}

還可以簡(jiǎn)寫(xiě)成，遵循 上右下左 順序來(lái)設(shè)置

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

下面代碼都會(huì)用簡(jiǎn)寫(xiě)的形式。

向右的三角形

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

<div class="triangle triangle-right"></div>

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

向下的三角形

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

<div class="triangle triangle-bottom"></div>

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

向左的三角形

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

<div class="triangle triangle-left"></div>

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

接下來(lái)再來(lái)看下如何實(shí)現(xiàn)下面的三角形呢？

其實(shí)不難發(fā)現(xiàn)，向左上的三角形剛好是向下的三角形的右半部分，所以要得到這個(gè)圖形，是不是只要把向下的三角形左半部分的邊框設(shè)為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;
}

同理，可得到其他三個(gè)不同方向三角形，代碼如下：

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

梯形

借助上面的實(shí)現(xiàn)三角形的方法，我們可以很容易的實(shí)現(xiàn)梯形，比如下面這個(gè)：

向上的梯形：

其實(shí)只要把上面 向上的三角形 的代碼加上寬度就能實(shí)現(xiàn)了

.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 設(shè)為 0 ，然后設(shè)置相應(yīng)的高度值。

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

平行四邊形

只要一個(gè) 向上的三角形 跟 向下的三角形 結(jié)合起來(lái)就能實(shí)現(xiàn)，需要配合一個(gè)偽元素。

.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: "";
}

五邊形

梯形加上一個(gè)三角形，很容易就能組合成一個(gè)五邊形，也需要配合一個(gè)偽元素來(lái)實(shí)現(xiàn)。

.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: "";
}

六邊形

如果兩個(gè)相反方向且底邊同樣大小的梯形，疊加在一起，是不是就能得到一個(gè)六邊形呢？同樣需要配合一個(gè)偽元素來(lái)實(shí)現(xiàn)。

.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: "";
}

實(shí)戰(zhàn)應(yīng)用

聊天氣泡