一、簡述

　　瀏覽網頁的時候，發現有些網頁當中的箭頭（三角形）是由border形成的，感到新奇。

二、內容

　　研究了一番后，首先普通的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分別設置四個顏色，那么boder的四邊就會各自變成不同顏色的梯形狀

<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都設置為0，那么border的四邊就會各自變成不同顏色的三角形

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

　　現在三角形（小箭頭）已經出現了，接下來把上、右、下邊還有background-color的顏色設置成transparent，就變成了一個三角形

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

　　又或者調整border四邊的各自border-width，就會出現高度不一的三角形

<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，就可以做出很巧妙的形狀來替代一些簡單的圖片

?

轉載于:https://www.cnblogs.com/kongbailingluangan/p/6443268.html

總結

以上是生活随笔為你收集整理的border-边框的形状的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。