border实现实心三角和空心详解,

先来个例子

<div class="one"></div>

.one{ width: 0;height: 0;border:20px solid red}

我们可以看到，一个由border撑起来的20宽高的正方形div

那么border的每一边在这里面占什么位置呢？

修改代码：.one{ width: 0;height: 0;

　　　　　　　　border:20px solid;

　　　　　　　　border-left-color:red;

　　　　　　　　border-right-color:red;

　　　　　　　　border-top-color:blue;

　　　　　　　　border-bottom-color:blue;

　　　　　　　　}

可以发现，border每边20px宽，在div中所占的区域是正好是个三角形；

为什么会是三角形呢？

再来修改代码；

　　　　  .one{ width: 10px;height: 10px;

　　　　　　　　border:20px solid;

　　　　　　　　border-left-color:red;

　　　　　　　　border-right-color:red;

　　　　　　　　border-top-color:blue;

　　　　　　　　border-bottom-color:blue;

　　　　　　　　}

 

这时可以发现，每边都成了个梯形；

我所理解的，border是由中心物体（指.one这个div）生成的，border围绕.one，当.one小到极限(一个点)时，每边都会将自己所占的区域尽量靠近中心物体，但又要平分所占区域（为什么要平分？四边四胞胎有福同享有难同当？我也解释不清了TAT）；

所以每边都会形成一个三角形，当中心物体无限小时，所显示出来的就是由4个三角形组成的正方形。

 

那么，实现实心三角形的方法，我们就可以用border的transparent；（透明，用在border属性对应的color上）;

向上的实心三角：

　　　　  .one{ width: 0px;height: 0px;

　　　　　　　　border:20px solid transparent;

　　　　　　　　border-bottom-color:red;

　　　　　　　　}

 

向下:

　　　　  .one{ width: 0px;height: 0px;

　　　　　　　　border:20px solid transparent;

　　　　　　　　border-top-color:red;

　　　　　　　　}

左右同理；

 空心三角

空心三角的实现其实就是两个大小不一的实心三角叠在一起

　　　　  .one{ width: 0px;height: 0px;

　　　　　　　　border:20px solid transparent;

　　　　　　　　border-top-color:red;

　　　　　　　　position:absolute;

　　　　　　　　top:0;

　　　　　　　　left:0;

　　　　　　　　}

　　　　　　.two{width:0;height:0;

　　　　　　　　border:19px solid transparent;

　　　　　　　　border-top-color:#fff;

　　　　　　　　position:absolute;

　　　　　　　　top;0;

　　　　　　　　left:1;

　　　　　　　　}

 

 

 

这里小的实心三角要放下面，不然就要给它加个z-index了