前端----文字下方小三角的实现方法

效果如图：

文字下有一个小三角，看起来美观小巧但是实现起来有点让人摸不到头脑，这里有两种方法实现，当然有人有更好的办法可以留言补充。

• 把块元素的长宽设为0再加下边线可以实现：

这种是常用的方法，网上很多，先用代码举个栗子：

     

.div{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color:white;
    position: absolute;
    left: 115px;
    bottom: 100%;
    margin-top: 20px;
}

如果这个元素设为div块元素,先把长宽取消即

width: 0;

height: 0;

设置边框即三角形的大小通过调整border的值实现（这里先把颜色设置成透明,我们只要下边框）：

border: 10px solid transparent;

设置三角的颜色通过设置border的bottom-color值实现：

border-bottom-color: white;

最后调整三角形位置

position: absolute;

left: 115px;

bottom: 100%;

margin-top: 20px;

• 插入背景图片法实现：

这种方法适合于行内元素比如<ul>中&l