三角形div的原理

三角形div原理

    首先我们写一个正常的方形div样式,但是我们把它的宽度和高度都设置为零，并且边框线设置的粗一点：

{ width：0px；

 height：0px;

Border:20px solid red;

}

由于我们宽度和高度都设置成了0，所以他显示的就是一个边长为边框线宽度（20px）的正方形，如图：

 

这时候你在div中添加任何文字、图片等等都是不会显示的，因为这个div的宽度和高度都是零，他之所以是正方形是因为他有边框宽度。

 接下来我们改变它的边框线属性：（我们不在让每一条边框线都为红色，给四条边框线设置不同的颜色）

{ width：0px；

 height：0px;

Border:20px solid；

border-colo：red  blue  yellow  green } 效果如下;

大家可以看到，这个正方形被均分了，所以我们制作三角形就是利用均分原理，比如我们想要黄色朝上的黄色三角形，我们只需要把上边框线、和左右边框线的颜色设置为透明就可以了，如下：

{ width：0px；

 height：0px;

Border:20px solid;

Border-color：transparent  transparent  yellow  transparent

}

 

 

 

转载于:https://www.cnblogs.com/HRZJ/p/5828797.html