css還是蠻強大的，對於三角形這個在網頁上不規則的形狀，很多前端小朋友們直接切圖了，這樣的做法可謂是偷懶啦，下面咱們就體驗下純css是實現的三角形吧。各種角度，帶你嘗試下。
其實三角的實現就是用border來做的。
下面是步驟分析：
1、首先來看看給乙個元素新增不同顏色的邊框吧
說明：我們來看四條邊框相交的角，這幾條邊框相交線並不是直角，而是乙個傾斜的狀態，其實這就是我們三角形形成的乙個方法；繼續往下看哦。
2、我們嘗試著把乙個元素的寬高設定為0；然後在新增上邊框試試看效果。
說明：我們在盒模型中知道，邊框始終是長在元素寬高之外的，很明顯上圖的效果就是用邊框撐開的乙個矩形，並且我們把注意點放在四條邊框交匯的地方，不難發現其中的道理。
3、然後開始實現三角形了：
說明：transparent屬性值代替之前的顏色值，當前的顏色為透明，這樣就能寫出下圖的效果。(這是關鍵的一部)。
4、最後對應著想要實現那個方向的「三角形」就新增transparent屬性值就ok了。
例：
前端怎麼畫三角形 如何用CSS畫三角形
1.前言 在博主某次前端面試過程中，被問到如何用css畫乙個三角形？相信很多朋友在面試中也被問到過這個問題，並且網上針對這個問題也有非常多的解決方案，大部分都是採用border來實現，經過我一番搜尋，發現講具體實現的 的很多，但是講實現原理的幾乎沒有 也可能是我沒有找到 下面，我就談談利用borde...
用CSS畫三角形
好久沒寫css了，練練手，剛看了下在以前公司做過的乙個 現在已經改版，裡面有個模組涉及到用css畫三角形，試著做了一下，分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素，隨便什麼元素，不過我習慣性的會用塊元素來做。如果行內元素就displ...
css畫三角形
好久沒寫css了，練練手，剛看了下在以前公司做過的乙個 現在已經改版，裡面有個模組涉及到用css畫三角形，試著做了一下，分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素，隨便什麼元素，不過我習慣性的會用塊元素來做。如果行內元素就displ...