用css创建一个三角形

三角形在web页面应用很多，不过最常见的还是用来指示，比如悬浮框的边缘。其实三角形的原理比较简单，当一个元素的宽和高都为0的时候，那么border就是一个正方形，这个时候，我们只需要显示正方形的一部分就可以了。

这个正方形被划分为四个部分，上右下左。如果我们需要一个指向上方的三角形，只需要把下面的三角形显示出来，其他的三角形隐藏或者设为透明就可以了。

<style>
.box{
            width: 0;
            height:0;
            border:16px solid transparent;
            border-bottom: 16px solid red;
        }
</style>
<div class="box"></div>

其中border的宽度可以用来调整三角形的大小。有时候，我们也需要一个带有缺口的三角形，这个时候，我们需要两个绝对定位的三角形，然后让它们重合。最后让里面的三角形设置为黑色，外面的三角形为白色。这个做法是借鉴别人的，其中有一个问题，我自己也不是很了解，两个三角形明位置一样，大小一样，合并在一起就形成了带缺口的三角形。

<style>
.box{
            width: 0;
            height:0;
            left: 0;
            top: 0;
            border: 8px solid transparent;
            position: absolute;
        }
       .box.b1{
            border-bottom-color:#000 ;
        }
       .box.b2{
            border-bottom-color:#fff ;
</style>
<div class="box b1 "></div>
<div class="box b2"></div>