11种方法实现一个tips带有描边的小箭头-创新互联
我们在网页开发中实现一个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实现不规则投影
.dui-tips {
&: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;
bottom: -9px;
border-color: #fff transparent transparent transparent;
filter: drop-shadow(0px 2px 0px #f60);
}
}查看效果
第三种通过特殊符号或字体双层覆盖
第三种方法和第一种类似，通过两层颜色叠加在有层级的偏移来实现
.dui-tips {
&:before, &:after {
font-size: 24px;
line-height: 18px;
position: absolute;
left: 50%;
display: table;
content: '◆';
transform: translate(-50%, 0);
text-align: center;
}
&:before {
z-index: 0;
bottom: -10px;
color: #f60;
}
&:after {
z-index: 1;
bottom: -8px;
color: #fff;
}
}查看效果
第四种通过text-shadow实现
这种放发通过给文子设置1px的阴影来显描边效果
.dui-tips {
&:after {
font-size: 24px;
line-height: 18px;
position: absolute;
left: 50%;
display: table;
content: '◆';
transform: translate(-50%, 0);
text-align: center;
z-index: 1;
bottom: -8px;
color: #fff;
text-shadow: 0 2px 0 #f60;
}
}查看效果
第五种 background双层覆盖
这种方式设置两个宽度和高度分别为10px的方块背景，再给两层背景分别设置不同的颜色，再通过两层背景颜色叠加，经过层级偏移再有transform的rotate属性旋转角度，来实现箭头的朝向。
.dui-tips {
&:before, &:after {
position: absolute;
left: 50%;
display: table;
width: 10px;
height: 10px;
content: '';
margin-left: -5px;
transform: rotate(-45deg);
}
&:before {
z-index: 0;
bottom: -6px;
background-color: #f60;
}
&:after {
z-index: 1;
bottom: -5px;
background-color: #fff;
}
}查看效果
第六种background和border
此方法就是设置一个宽度和高度分别为10px的方块背景，然后背景相邻的两条边描边再有transform的rotate属性旋转角度，来实现箭头的朝向。
.dui-tips {
&:after {
position: absolute;
left: 50%;
display: table;
width: 10px;
height: 10px;
margin-left: -5px;
content: '';
transform: rotate(-45deg);
z-index: 1;
bottom: -6px;
border-bottom: 1px solid #f60;
border-left: 1px solid #f60;
background-color: #fff;
}
}查看效果
第七种background和box-shadow
.dui-tips {
&:after {
position: absolute;
left: 50%;
display: table;
width: 10px;
height: 10px;
content: '';
margin-left: -5px;
transform: rotate(-45deg);
z-index: 1;
bottom: -5px;
background-color: #fff;
box-shadow: -1px 1px 0 #f60;
}
}查看效果
第八种linear-gradient
.dui-tips{
&:before, &:after{
position: absolute;
left: 50%;
display: table;
width: 10px;
height: 10px;
content: '';
margin-left: -5px;
transform: rotate(-135deg);
}
&:before {
z-index: 0;
bottom: -6px;
background: linear-gradient(-45deg, transparent 7px, #f60 0);
}
&:after {
z-index: 1;
bottom: -5px;
background: linear-gradient(-45deg, transparent 7px, #fff 0);
}
}查看效果
第九种linear-gradient和box-shadow
.dui-tips{
&:after{
position: absolute;
left: 50%;
display: table;
width: 10px;
height: 10px;
content: '';
margin-left: -5px;
transform: rotate(-135deg);
z-index: 1;
bottom: -5px;
background: linear-gradient(-45deg, transparent 7px, #fff 0);
box-shadow: -1px -1px 0 #f60
}
}查看效果
第十种linear-gradient和border
.dui-tips{
&:after{
position: absolute;
left: 50%;
display: table;
width: 10px;
height: 10px;
content: '';
margin-left: -5px;
transform: rotate(-135deg);
z-index: 1;
bottom: -6px;
background: linear-gradient(-45deg, transparent 7px, #fff 0);
border-top: 1px solid #f60;
border-left: 1px solid #f60;
}
}查看效果
第十一种ouline
.dui-tips {
&:before, &:after {
position: absolute;
left: 50%;
display: table;
width: 0;
height: 0;
content: '';
transform: rotate(45deg);
outline-style: solid;
outline-width: 5px;
}
&:before {
z-index: 0;
bottom: -1px;
outline-color: #f60;
}
&:after {
z-index: 1;
bottom: 0;
outline-color: #fff;
}
}查看效果
作者： w3cbest前端开发
互动： 如有疑问可进群讨论
本文原创，著作权归作者所有。商业转载请联系@w3cbest前端开发获得授权，非商业转载请注明原链接及出处。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章名称：11种方法实现一个tips带有描边的小箭头-创新互联
文章出自：http://myzitong.com/article/deepse.html