1.思想:相当于两个css三角形图标的部分重合组成
2.css 代码
.slide{
display: none;
position:absolute;
left: -5px;
top:18px;
width: 110px;
text-align: center;
padding-top:15px;
border-bottom: 1px solid $blue2;
}
.slide .icon-box{
display: block;
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
border-color: transparent transparent #6bafff transparent;
position: absolute;
top: 3px;
left: 48px;
}
.slide .icon-box em{
display: block;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -9px;
left: -10px;
}
3.html代码
<div class="slide">
<span class="icon-box">
<em></em>
</span>
</div>
4.效果
5.兼容性
主要是对transparent兼容性问题