qyl_anikin

css 实现三角原理解释

1：首先一个元素在以下结构下面是个黑色的正方形
.div1{
width:0;
height: 0;
border:4px solid;
}2：四块红色和黑色的木板代表元素的四个边框，把他们两横两竖重叠起来，这时候他们在二维平面的投影便成了上面的效果。
说到这里，大家该明白了上面的三角形图标是怎么来的了吧：元素没有下边框，而左右边框又是透明的，相当于只有上图中的上面的黑色三角形部分。

.div1{
width:0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}

{ width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid #ff0000; border-bottom: 40px solid transparent; }

 总结：打算向那边，那边的border就不存在，但是如果存在则表示在这个方向上一段位移；
比如：向上的三角，如果存在Border-top:2px solid transparent;  则表明在top方向上向下移动了2px的位移