利用css畫出一個三角形
02-24
CSS還是蠻強大的，對於三角形這個在網頁上不規則的形狀，很多前端小朋友們直接切圖了，這樣的做法可謂是偷懶啦，下面咱們就體驗下純CSS是實現的三角形吧。各種角度，帶你嘗試下。
其實三角的實現就是用border來做的。
下面是步驟分析：
1、首先來看看給一個元素添加不同顏色的邊框吧
說明：我們來看四條邊框相交的角，這幾條邊框相交線並不是直角，而是一個傾斜的狀態，其實這就是我們三角形形成的一個方法；繼續往下看哦。
2、我們嘗試著把一個元素的寬高設置為0；然後在添加上邊框試試看效果。
說明：我們在盒模型中知道，邊框始終是長在元素寬高之外的，很明顯上圖的效果就是用邊框撐開的一個矩形，並且我們把注意點放在四條邊框交匯的地方，不難發現其中的道理。
3、然後開始實現三角形了：
說明：transparent屬性值代替之前的顏色值，當前的顏色為透明，這樣就能寫出下圖的效果。（這是關鍵的一部）。
4、最後對應著想要實現那個方向的「三角形」就添加transparent屬性值就OK了。
例：
文章來源：千鋒HTML5
推薦閱讀：
如何理解虛擬DOM?
千鋒教育：web前端小白如何擺脫迷茫
想像一下，五年以後我們大家每天在用的編程語言、編輯器、IDE 等會變成一個什麼樣子？
推薦閱讀：