929
css三角形滴原理
腫麼用css畫一個如下圖滴三角形
相信很多同學都知道，下麵這段代碼闊以實現
|
1
2
3
4
5
6
7
|
#triangle-up
{
width:0;
height:0;
border-left:50px
solid
transparent;
border-right:50px
solid
transparent;
border-bottom:100px
solid
red;
}
|
但素，大部分人不知道為蝦米上麵這段代碼可以畫出一個三角形
下麵偶們圖文並茂的來看一下
首先呢，下麵是一個盒模型，padding和margin都視為0，border假設是10px
首先，我們把border-top設為0，得到下圖
然後吧width設為0，中間內容的寬度就沒了，隻剩高，如下圖
然後再把height設為0
然後把左右的border設為transparent，得到最終的三角形
微博上看到有人做了個gif圖，形象的展示的三角形的原理
最後更新：2017-04-03 05:39:04