一、簡(jiǎn)述

　　瀏覽網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)有些網(wǎng)頁(yè)當(dāng)中的箭頭（三角形）是由border形成的，感到新奇。

二、內(nèi)容

　　研究了一番后，首先普通的border用法是這樣的

<div style=" border-width:2px; border-color:#F44336; border-style:solid; width:100px; height:100px; background-color:Black;"> </div>

　　如果把border-width放大10倍、border-color分別設(shè)置四個(gè)顏色，那么boder的四邊就會(huì)各自變成不同顏色的梯形狀

<div style=" border-width:20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:100px; height:100px; background-color:Black;"> </div>

　　然后把div的width與height都設(shè)置為0，那么border的四邊就會(huì)各自變成不同顏色的三角形

<div style=" border-width:20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:0; height:0; background-color:Black;"> </div>

　　現(xiàn)在三角形（小箭頭）已經(jīng)出現(xiàn)了，接下來(lái)把上、右、下邊還有background-color的顏色設(shè)置成transparent，就變成了一個(gè)三角形

<div style=" border-width:20px; border-color:transparent transparent transparent #FFEB3B; border-style:solid; width:0; height:0; background-color:transparent;"> </div>

　　又或者調(diào)整border四邊的各自border-width，就會(huì)出現(xiàn)高度不一的三角形

<div style=" border-width:20px 30px 40px 50px; border-color: #F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:0; height:0; background-color:Black;"> </div>

?

　　最后利用這種技巧加absolute，就可以做出很巧妙的形狀來(lái)替代一些簡(jiǎn)單的圖片

?

轉(zhuǎn)載于:https://www.cnblogs.com/kongbailingluangan/p/6443268.html

總結(jié)

以上是生活随笔為你收集整理的border-边框的形状的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。