前段时间，有人问下面这个图的效果，怎么用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