工作中经常遇到一些 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,设置合适的边框宽度,保留其中一条边框颜色,其余边框颜色设为透明.
来源: http://www.jianshu.com/p/8bba50dcf68d