我起初也一头雾水，后来看到一个类似的案例，才恍然大悟。我们都知道，css的每条边相交的地方，都是三角，如果，将容器的宽高，设置为0，而边框非常粗，并且每条边颜色不同，就会得到下面的效果：
css代码：
<style type="text/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;
}
</style>
html代码：
<div class="test"></div>如果将其中三条边的透明度设置为0，即，将上面的代码的三条边改成：
border-bottom-color:transparent; border-left-color:transparent; border-right-color:transparent;那么就会得到下面的效果：
三角形已经出来了，那么想实现一开始的效果，就简单了，即再做一个比这个边框细一点的三角形，边框颜色为白色，盖在这个倒三角的上面，就能实现了，而且，兼容性非常好，效果图：
运行下面的代码，看看最终效果：
提示：您可以先修改部分代码再运行