css实现三角形

工作中经常遇到一些tip提示，tip提示会有一个小三角形，我们可以使用图片或者iconfont实现，当然最高级的还是用css实现。下面就简单总结一下如何使用css的border属性来绘制小三角。
假设我们有这样一个div：

<style>
    .arrow {
        width: 100px;
        height: 100px;
        border: 100px solid;
        border-color: red blue;
    }
</style>
<div class="arrow"></div>

效果如下：

效果图

我们看到了四个梯形，那么如何将梯形变成三角形呢？很简单，只需将div的宽高设为0即可。
效果如下：

三角形

<style>
    .arrow {
        width: 0px;
        height: 0px;
        border: 100px solid transparent;
    }
    .arrow-up {
        border-bottom-color: red;
    }
    .arrow-down {
        border-top-color: red;
    }
    .arrow-left {
        border-right-color: red;
    }
    .arrow-right {
        border-left-color: red;
    }
</style>
<div class="arrow arrow-up"></div>
<div class="arrow arrow-down"></div>
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>

上面我们所绘制出的箭头都是等腰直角三角形，那么如何绘制出来锐角三角形和钝角三角形呢？
答案很简单，只需令边框的上下宽度和左右宽度不一样即可。

 <style>
    .arrow {
        width: 0px;
        height: 0px;
        border-width: 100px 50px;
        border-style: solid;
        border-color: transparent;
    }
    .arrow-down {
        border-top-color: red;
    }
</style>
<div class="arrow arrow-down"></div>

效果如下：

锐角三角形

反之，我们令边框上下宽度小于左右宽度即可得到钝角三角形。
扩展：以上我们只是保留了一条边框的颜色，当然我们也可以保留两条边框颜色，例如保留上右边框颜色，可以得到另一个等腰直角三角形。我们同样可以令四条边框的宽度不一致，得到非等腰三角形。

要点：绘制三角形只需令元素宽高为0，设置合适的边框宽度，保留其中一条边框颜色，其余边框颜色设为透明。