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