「前端小技巧」用border畫三角形和梯形

前言

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

在複習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畫的藍胖子。