1.前言
在博主某次前端面試過程中，被問到如何用css畫乙個三角形？相信很多朋友在面試中也被問到過這個問題，並且網上針對這個問題也有非常多的解決方案，大部分都是採用border來實現，經過我一番搜尋，發現講具體實現的**的很多，但是講實現原理的幾乎沒有(也可能是我沒有找到)，下面，我就談談利用border畫三角形其內部的原理。
2.原理
2.1 第一步
首先，先來乙個div，然後給這個div加一層border，並且給上下左右border分別加上不同顏色，以便觀察，**和效果如下：
.trangle{width:100px;height:100px;border:100px solid #000;border-top-color:red;border-bottom-color:yellow;border-left-color:blue;border-right-color:green;
2.2 第二步
接著，將這個div的width變為0，我們再來看看效果。可以看到，由於div的寬度變成了0，左右兩邊的border「吸」在了一起，同時上下的border變成了三角形，好像快要完成了，別急，再看看第三步。
.trangle{width:0px;height:100px;border:100px solid #000;border-top-color:red;border-bottom-color:yellow;border-left-color:blue;border-right-color:green;
2.3 第三步
然後，再將這個div的height變為0，效果如下。我們可以看到，由於div的高度也變成了0，上下兩個border也「吸」在了一起，同時上下的border也變成了三角形，到現在為止，四個三角形已經出來了
.trangle{width:0px;height:0px;border:100px solid #000;border-top-color:red;border-bottom-color:yellow;border-left-color:blue;border-right-color:green;
2.4 第四步
最後，就看你想要哪個角啦，想要哪個角就把其餘三個border設為透明即可。例如，我想要最上面的三角形，那就把下、左、右設為透明，**和效果如下：
.trangle{width:0px;height:0px;border:100px solid #000;border-top-color:red;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;
2.5 簡化**
其實，我們不需要把四個border都設定一遍，只需設定你想要畫的三角形所涉及到的三條邊的border即可。以上步的畫最上面的三角形為例，只需設定上、左、右三條邊即可，並且要上三角形，就把左右border設為透明，**和效果如下：
.trangle{width:0px;height:0px;border-top:100px solid red;border-left:100px solid transparent;border-right:100px solid transparent;
3.總結
至此，以上就是畫三角形的具體步驟和實現原理，再當面試官問你如何使用css畫乙個三角形的時候，這時候你可以很皮的問一句您想要尖尖朝哪邊的三角形呢？哈哈哈哈哈哈哈哈哈
css畫三角形
好久沒寫css了，練練手，剛看了下在以前公司做過的乙個 現在已經改版，裡面有個模組涉及到用css畫三角形，試著做了一下，分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素，隨便什麼元素，不過我習慣性的會用塊元素來做。如果行內元素就displ...
CSS 畫三角形
使用 css 畫三角形？第一感覺不太可能。但那是對 border 有一點誤會。來看乙個示例 它的 html 如下 我們需要注意，邊框相接的地方，即相鄰邊框的樣式。因為我們平時使用邊框，一般只幾畫素寬，所以可以不注意它們相接的樣式，但當邊框達到50畫素寬，就可以清楚看到，它們在相接時是如何處理的 這是...
css畫三角形
解析 border width 100px 100px 100px 200px border color transparent transparent transparent eb1111 屬性值值說明 color 指定背景顏色。transparent 指定邊框的顏色應該是透明的。這是預設 inh...