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

2024-07-11 08:42:28

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

前言

border 邊框?qū)傩钥梢哉f是我們在網(wǎng)頁布局中最常用不過的一個屬性之一。 border 它不只是邊框，它還有很多非常有用的“黑魔法”哈，讓我們一起來學(xué)習(xí)一下。

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

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

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

是不是剩下4個不同顏色不同方向的三角形了，繼續(xù)往下看，一起來見證下 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;}

還可以簡寫成，遵循 上右下左 順序來設(shè)置

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

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

向右的三角形

同理，設(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;}

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

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

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

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

梯形

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

向上的梯形：

其實只要把上面 向上的三角形 的代碼加上寬度就能實現(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;}

平行四邊形

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

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

五邊形

梯形加上一個三角形，很容易就能組合成一個五邊形，也需要配合一個偽元素來實現(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: "";}

六邊形

如果兩個相反方向且底邊同樣大小的梯形，疊加在一起，是不是就能得到一個六邊形呢？同樣需要配合一個偽元素來實現(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: "";}

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

聊天氣泡