前言

我們組要招一個前端開發，我也借此機會整理了一下前端的基礎知識。否則在面試的時候如果被别人問倒了，人家還以為我們公司沒有技術大牛的。

在複習CSS基礎的時候，我被一個網友的奇思妙想震驚了，居然可以用border來畫三角形。在此之前，我都隻是用border來打框框的。[流淚][流淚][流淚]

正文

我們比較常規的用法，就是用border屬性來設置邊框，如下所示：

div { width: 100; height: 100; border: 1px solid; }

現在，為了便于觀察，我們将四條邊設置為不同的顔色，如下所示：

div { width: 100; height: 100; border-top: 1px solid red; border-left: 1px solid orange; border-right: 1px solid green; border-bottom: 1px solid blue; }

注意，神奇的事情即将發生。将邊框加粗，如下所示：

div { width: 100; height: 100; border-top: 50px solid red; border-left: 50px solid orange; border-right: 50px solid green; border-bottom: 50px solid blue; }

看到了嗎？出現了4個梯形。接着，将長度和寬度縮小，如下所示：

div { width: 10; height: 10; border-top: 50px solid red; border-left: 50px solid orange; border-right: 50px solid green; border-bottom: 50px solid blue; }

梯形的短邊越來越短，直到為0，三角形就出現了。那麼，設置長度和寬度為0，如下所示：

div { width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid orange; border-right: 50px solid green; border-bottom: 50px solid blue; }

此時，四個方向的三角形就形成了，想要展示哪個三角形，隻需要将其他三個設置為透明即可，如下所示：

div { width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid transparent; }

甚至，各種三角形、梯形的組合形态都可以随意拼接，如下所說：

div { width: 0; height: 0; border-top:50px solid red; border-left:50px solid transparent; border-right:50px solid green; border-bottom:50px solid transparent; }

div { width: 100; height: 0; border-top:50px solid red; border-left:50px solid transparent; border-right:50px solid green; border-bottom:50px solid transparent; }

div { width:100; height:0; border-top:100px solid red; border-left:20px solid yellow; border-right:20px solid green; border-bottom:0px solid transparent; }

結尾

CSS真是強大啊，感覺隻要技術夠牛，就可以用CSS畫任意圖形。最後，附上網友用CSS畫的藍胖子。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!