邊框寫三角形，這個技能從事前端的小伙伴應該都不陌生，不過大多數都是知其然而不知其所以然，今天我們就來探究一下這里面的原理。

隨意的在頁面上給一個盒子，然后給一個邊框來看看。

這樣的一段代碼，給到盒子的寬高都是100像素，然后10個像素實線的紅色邊框；

效果圖如下，看起來沒有什么特別的，好像和三角形也沒什么關系：

但是當我們把每一條邊的顏色改得不一樣的時候，就能看出來一些端倪了：

可以看到，當每一條邊的顏色都不一樣的時候，每兩條邊交匯的地方是一個斜角。

其實這個斜角一直都存在，只是當我們兩條邊的顏色一樣的時候看不出來而已，曾經也有人在面試的時候問到過這個問題：

邊框是什么形狀的？大家現在可有答案了？

不過從這里來看的話，雖然有一個斜角了，但是和三角形好像還是沒有太大的關系啊？

不著急，再往下走。當我們把盒子的寬高慢慢的減小，我們可能會發現一些不一樣的東西；

下圖四個盒子的寬高分別是：

100，80，40，10

好像可以看到盒子慢慢變小，邊框雖然沒有發生變化；

但是當斜角慢慢靠近的時候，似乎有了一點三角形的痕跡，那么再接著縮小盒子，來看看效果：

看不清楚？我們把邊框的寬度改大一點試試

可以看到，當寬高為0，四條邊框的顏色不一樣的時候，邊框或者說整個盒子變成了一個由四個三角形所組成的矩形；

這是上圖的代碼：

在這里，我加大了邊框的寬度，并且把盒子的寬度和高度都設置為0(當值為0的時候可以不寫單位)。

這時候三角形已經出來了，但是是四個，而我們通常情況下只需要一個。

所以我們可以考慮把其他三條邊框如果變成透明的話是不是就只剩下其中一個了呢？

如果我現在需要一個尖角朝上的三角形，那么從這四個三角形里面，貌似只有下面這條邊框符合我的需求；

所以我需要把上邊框，和左右兩條邊框的顏色都改成透明的。

在這里，透明可以用transparent來表示：

得到下圖：

可以看到這時候就只剩下一個三角形了，其他的三條邊看不見了。

看起來這樣似乎就完成了，但是我們還需要處理一下兼容性，transparent這個值在IE6下會顯示成一個黑色。

不過，我們可以用邊框的樣式來解決，代碼如下：

這里，我們需要把其他三條邊框的樣式改成點線，這樣在IE6下就能顯示透明了。

然后把上面的代碼優化一下就好了：

上面我們已經得到一個等腰的三角形了，基本已經能夠滿足我們的日常需求。

不過總有一些特殊需求，比如一個不規則的三角形？

或者一個直角三角形？

或者我們怎么去確定三角形的寬高呢？

從上面的代碼可以看出來改變邊框的width值可以改變邊框的高度。

但是同時也改變了邊框的寬度，我們可以再仔細看看這張圖：

單看下面的那個三角形，可以看到這個三角形的底邊寬度完全等于左右兩條邊框的高度之和。

這時候我們再回過頭來看看我們的代碼：

這段代碼里面邊框的顏色各不相同，邊框的樣式也是各不相同，唯獨寬度是四條邊都是一樣的。

我們把其他三條邊的顏色先還原回來，然后來改一些邊框的寬度試試會有什么效果：

這是當我把邊框的上下兩條邊的寬度為100，左右兩條邊的寬度為50的時候的樣子。

如果說光看下面這一條邊的話，它的高度沒有發生任何變化，但是底邊的寬度明顯只有100個像素了，這也就證明了上面那句話：

單看下面的那個三角形，可以看到這個三角形的底邊寬度完全等于左右兩條邊框的高度之和。

那么也就是說左右兩邊的邊框寬度決定了下面這個三角形的寬度；

而下面這條邊的寬度決定了這個三角形的高度，換成代碼也就是：

border-left-width 和 border-right-width決定了這個三角形的寬度，border-bottom-width決定了這個三角形的寬度。

我們進一步來看，如果左右兩條邊的寬度不一樣會發生什么呢？

這是當我左邊的邊框寬度只有10像素，右邊的邊框寬度為80像素的時候看到的效果。

可以發現，這個時候三角形已經變成了一個任意的三角形了。

當然，它的寬高還是能算出來的；

寬度就是底邊的高度，也就是100像素，而寬度是左右兩條邊框寬度之和，也就是90像素：

再把其他三條邊“隱藏”起來，那么我們將得到一個不規則的三角形：

甚至直角三角形：

這是代碼：

其實代碼只是一個工具，能做到什么，取決于我們的想法…

大家甚至可以想想，用以上知識點，稍微拓展一下，能否寫一個梯形呢？

總結

以上是生活随笔為你收集整理的前端怎么画三角形_前端小技巧：边框写三角形的全部內容，希望文章能夠幫你解決所遇到的問題。

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