css实现三角形

96
tiancai啊呆
2018.01.10 21:33 字数 380

工作中经常遇到一些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,设置合适的边框宽度,保留其中一条边框颜色,其余边框颜色设为透明。

学习笔记
Gupao