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图，形象的展示的三角形的原理