css三角形滴原理

肿么用css画一个如下图滴三角形

相信很多同学都知道,下面这段代码阔以实现

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