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，得到最终的三角形