在布局中露乏，經常遇到一些三角形形狀的按鈕：
其實用html+css就能實現，很簡單完慧，代碼如下：
第一種方法
html代碼：
<!-- 向上 -->
<div class="top_triangle"></div>
<!-- 向下 -->
<div class="bottom_triangle"></div>
<!-- 向左 -->
<div class="left_triangle"></div>
<!-- 向右 -->
<div class="right_triangle"></div>
css代碼
/*向上*/
.top_triangle{
width:0;
height:0;
border-bottom:30px solid green;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
/*向下*/
.bottom_triangle{
width:0;
height:0;
border-top:30px solid black;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
/*向右*/
.left_triangle{
width:0;
height:0;
border-top:30px solid transparent;
border-left:30px solid yellow;
border-bottom:30px solid transparent;
}
/*向左*/
.right_triangle{
width:0;
height:0;
border-top:30px solid transparent;
border-right:30px solid red;
border-bottom:30px solid transparent;
}
第二種方法
以上代碼便是實現上下左右方向三角形的代碼；然而其實不難發(fā)現，其實它們之間有個共同點锈遥，都是由border中的top、right勘畔、bottom所灸、left實現的，因此我們還有一種寫法炫七，通過實現設置一個div的border爬立，讓其隱藏掉，再給其中一個方向顏色万哪，該方向的三角形就能顯現出來侠驯，比如實現向上方向的三角形的css代碼：
.top_triangle{
width:0;
height:0;
//將其先隱藏掉抡秆，再顯示。
border:30px solid transparent;
border-bottom:30px solid green;
}
其它方向的就相類似吟策，就不一一舉例了儒士。
一點tips
如果認真嘗試敲過這個代碼的讀者或許會發(fā)現，以第一種方法的例子比方檩坚，都給border設置了三個方向的值着撩，好奇的人會想，只設置兩個行或者一個行嗎效床？敲敲就知道啦~
實踐中告訴我睹酌，設置一個或者兩個但設置相反方向上的border值的都不會顯示出來，可以試試剩檀；但是如果兩個中憋沿，不同方向上的兩個值是會顯示出來的，至于是什么形狀沪猴，就看你選的方向了辐啄。實踐出真知！
實現的基本理解（方便記）
圖片中最左方的正方形css代碼如下：
.all_triangle{
width:0;
height:0;
border-top:30px solid black;
border-left:30px solid yellow;
border-right:30px solid red;
border-bottom:30px solid green;
}
加上在代碼中出現最多的transparent（我理解隱藏掉）运嗜，就不難理解壶辜，其實也就是將一個盒模型中的padding+content，用width+height都設置為零干掉担租，然后給讓border隆重登場砸民，設置相應的值，當然這些值都是必須的奋救，然后呢岭参，將要顯現出來的顯示，該隱藏的就隱藏尝艘，第一種方法中干脆就省略了一個（也只能是一個）演侯，至于大小顏色位置就隨你設置了 。
延伸
css3中的border-radius背亥，有個圖案如下
其實這個的實現用border也行秒际。代碼如下：
.eatFace{
width:0;
height:0;
border:30px solid red;
border-radius:50%;
border-right:30px solid transparent;
}
至于原理，如果大家讀懂了三角形的狡汉，這個不難理解娄徊。
最后，感謝讀到最后的讀者盾戴，純屬學習中的分享寄锐，望多多指教，尋求共同進步！
