html图片旁边加文子,css 11种方法实现一个tips带有描边的小箭头

我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边，今天我们就借那些现有的文章在深入一点来说说如何给tips小箭头描边，本章不涉及svg/canvas，没必要因为我讲的是css。

主体样式：

w3cbest我是一个tips

.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;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。