css倒三角制作，css倒三角的原理

前段时间，有人问下面这个图的效果，怎么用css做出来，不用CSS3，兼容到IE7：

我起初也一头雾水，后来看到一个类似的案例，才恍然大悟。我们都知道，css的每条边相交的地方，都是三角，如果，将容器的宽高，设置为0，而边框非常粗，并且每条边颜色不同，就会得到下面的效果：

css代码：

.test{

width:0px;

height:0px;

border:100px solid red;

border-top-color:red;

border-bottom-color:blue;

border-right-color:orange;

border-left-color:black;

}

html代码：

如果将其中三条边的透明度设置为0，即，将上面的代码的三条边改成：

border-bottom-color:transparent;

border-left-color:transparent;

border-right-color:transparent;

那么就会得到下面的效果：

三角形已经出来了，那么想实现一开始的效果，就简单了，即再做一个比这个边框细一点的三角形，边框颜色为白色，盖在这个倒三角的上面，就能实现了，而且，兼容性非常好，效果图：

作者：舒小羽
链接：https://www.jianshu.com/p/d76ab0d19f0c