css三角形的实现原理

假设我们有这样一个div：

<div class="triangle"></div>
<style>
.triangle{
      width:100px;
      height:100px;
      border:30px solid;
      border-color:green pink red purple;
    }
</style>

你会看到：

我们去掉宽高：

.triangle{
      width:0;
      height:0;
      border:30px solid;
      border-color:green pink red purple;
    }

变成了这样：

由于IE6的bug(高度为0的div会有一定默认的高度，需要做一些小调整，给div加一个overflow:hidden，IE6就能正确解析了。

现在我们可以实现任意三角形了，举例实现向上的三角形，那么将其他三个边的颜色设为透明保留底部边的颜色就可以了：

border-color:transparent transparent red transparent;

这样，三角形就实现了。