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