我们在网页开发中实现一个tips时会有一个小箭头,实现这种方法的文章网上已经泛滥了,但有时实现这个小箭头不止只有单纯的三角它还有描边,今天我们就借那些现有的文章在深入一点来说说如何给tips小箭头描边,本章不涉及svg/canvas,没必要因为我讲的是css。
主体样式:
<div class="dui-tips"><a href="http://www.w3cbest.com">w3cbest我是一个tips</a></div>
.dui-tips{
position: relative;
padding: 10px;
text-align: center;
border: 1px solid #f60;
border-radius: 5px;
background-color: #fff;
}
第一种border描边双层覆盖:
就是大家常用的border,实现原理就是给其中一条边设置颜色宽度及样式,我这里使用了两个伪类进行折叠,将一个白色的覆盖在有颜色的伪类上面,再偏移1px来模拟实现1px的描边效果,代码如下:
.dui-tips {
&:before, &:after {
position: absolute;
left: 50%;
display: table;
width: 0;
height: 0;
content: '';
transform: translate(-50%, 0);
border-width: 10px 10px 0 10px;
border-style: solid;
}
&:before {
z-index: 0;
bottom: -10px;
border-color: #f60 transparent transparent transparent;
}
&:after {
z-index: 1;
bottom: -8px;
border-color: #fff transparent transparent transparent;
}
}
第二种border描边结合滤镜drop-shadow属性:
第二种是第一种的延伸,使用滤镜filter的drop-shadow描边来实现,box-shadow和drop-shadow实现不