使用CSS的border屬性繪制各種幾何形狀的方法
前言
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)用
聊天氣泡

是不是用到了 向下的三角形 結(jié)合一個(gè)圓角矩形來(lái)實(shí)現(xiàn)。
下拉菜單
我們打開(kāi)淘寶天貓,來(lái)看下它頂部的下拉菜單,是不是也用到 向上的三角形 和 向下的三角 形。

我們來(lái)看下它的實(shí)現(xiàn)代碼:

再來(lái)看一個(gè),我們打開(kāi)京東秒殺

是不是就用到了我們上面分析的 平行四邊形 來(lái)實(shí)現(xiàn)的,我們同樣來(lái)看下它的實(shí)現(xiàn)代碼:

就是通過(guò)一個(gè)矩形,然后配合兩個(gè)偽元素的三角形結(jié)合起來(lái)實(shí)現(xiàn)的。
具體使用場(chǎng)景還有很多,大家可以根據(jù)自己平時(shí)項(xiàng)目開(kāi)發(fā)中的實(shí)際需求來(lái)發(fā)揮想象。
能用CSS樣式搞定的效果就不要使用圖片哈,不僅有利于后期的維護(hù),也能減少網(wǎng)頁(yè)的請(qǐng)求,提高頁(yè)面的加載速度。
總結(jié)
其實(shí)通過(guò)各種組合,還可以實(shí)現(xiàn)很多不同的形狀,這里就不一一列舉了。比如還可以實(shí)現(xiàn) 八邊形 、 五角星 、 六角星 、 八角星 、 十二角星 等等, border 就是這么強(qiáng)大。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章

使用CSS的border-radius屬性 設(shè)置圓弧
這篇文章主要介紹了使用CSS的border-radius屬性 設(shè)置圓弧,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-26詳解CSS3中的box-sizing(content-box與border-box)
這篇文章主要介紹了CSS3中的box-sizing(content-box與border-box)的相關(guān)資料,需要的朋友可以參考下2019-04-19
CSS繪制三角形的實(shí)現(xiàn)代碼(border法)
這篇文章主要介紹了CSS繪制三角形的實(shí)現(xiàn)代碼(border法)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-11詳解CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)
本篇文章主要介紹了CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-29- 這是一款由腳本之家翻譯自國(guó)外網(wǎng)站的在線CSS工具,可在線調(diào)整生成樣式的邊框圓角效果,以及邊框的寬度、顏色、樣式等屬性,還可實(shí)時(shí)預(yù)覽生成的CSS代碼,并支持一鍵復(fù)制代碼2017-09-19
css display inline block 兼容性問(wèn)題寫(xiě)法
今天在寫(xiě)布局的時(shí)候發(fā)現(xiàn)的一個(gè)bug,如果不這樣就達(dá)不到預(yù)期的效果,無(wú)法兩行排列,原來(lái)ie6、ie7下對(duì)display:inline-block不支持,所以需要用到css hack才可以2016-01-10- css3給display屬性提供了box這個(gè)值,極大的方便了開(kāi)發(fā)者,下面給大家介紹css3 display box具體用法,對(duì)css3 display box相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-25
- 本篇文章給大家介紹css3 display知識(shí)詳解,涉及到css3 display相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2015-11-25
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對(duì)使用時(shí)產(chǎn)生的空隙問(wèn)題的解決作了重點(diǎn)講解,需要的朋友可以參考下2015-11-09- 在一般的CSS布局制作時(shí)候,我們常常會(huì)用到display對(duì)應(yīng)值有block、none、inline這三個(gè)值。下面我們來(lái)分別來(lái)認(rèn)識(shí)和學(xué)習(xí)什么時(shí)候用什么值。這里通過(guò)CSS display知識(shí)加實(shí)例講解2014-09-02



