警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>HTML/CSS>css多种方法实现一个tips带有描边的小箭头

css多种方法实现一个tips带有描边的小箭头

原创2018-12-21HTML/CSS2145 次阅读 · 读完需要 12 分钟。

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

See the Pen 第一种border描边双层覆盖 by w3cbest.com (@xianzhiding) on CodePen.

<div class="dui-tips">
  <a href="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;
	}
}

See the Pen 第一种border描边双层覆盖 by w3cbest.com (@xianzhiding) on CodePen.

第二种border描边结合滤镜drop-shadow属性:

第二种是第一种的延伸,使用滤镜filter的drop-shadow描边来实现,box-shadow和drop-shadow实现不规则投影 http://www.w3cbest.com/?p=172

.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;
	}
	&:after {
    bottom: -9px;
    border-color: #fff transparent transparent transparent;
    filter: drop-shadow(0px 2px 0px #f60);
	}
}

See the Pen 第二种border描边结合滤镜drop-shadow属性 by w3cbest.com (@xianzhiding) on CodePen.

第三种通过特殊符号”◆”字体双层覆盖

第三种方法和第一种类似,通过两层颜色叠加在有层级的偏移来实现

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

See the Pen 第三种通过特殊符号”◆”字体双层覆盖 by w3cbest.com (@xianzhiding) on CodePen.

第四种通过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;
	}
	&:after {
    z-index: 1;
    bottom: -8px;
    color: #fff;
    text-shadow: 0 2px 0 #f60;
	}
}

See the Pen 第四种通过text-shadow实现 by w3cbest.com (@xianzhiding) on CodePen.

第五种 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;
	}
}

See the Pen 第五种 background双层覆盖 by w3cbest.com (@xianzhiding) on CodePen.

第六种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);
	}
	&:after {
    z-index: 1;
    bottom: -6px;
    border-bottom: 1px solid #f60;
    border-left: 1px solid #f60;
    background-color: #fff;
	}
}

See the Pen 第六种background和border背景描边旋转 by w3cbest.com (@xianzhiding) on CodePen.

第七种background和box-shadow

.dui-tips {
	&:after {
    position: absolute;
    left: 50%;
    display: table;
    width: 10px;
    height: 10px;
    content: '';
    margin-left: -5px;
    transform: rotate(-45deg);
	}
	&:after {
    z-index: 1;
    bottom: -5px;
    background-color: #fff;
    box-shadow: -1px 1px 0 #f60;
	}
}

See the Pen 第七种background和box-shadow by w3cbest.com (@xianzhiding) on CodePen.

第八种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);
	}
}

See the Pen 第八种linear-gradient by w3cbest.com (@xianzhiding) on CodePen.

第九种linear-gradient和box-shadow

.dui-tips{
	&:after{
    position: absolute;
    left: 50%;
    display: table;
    width: 10px;
    height: 10px;
    content: '';
    margin-left: -5px;
    transform: rotate(-135deg);
	}
	&:after {
    z-index: 1;
    bottom: -5px;
    background: linear-gradient(-45deg, transparent 7px, #fff 0);
    box-shadow: -1px -1px 0 #f60
	}
}

See the Pen 第九种linear-gradient和box-shadow by w3cbest.com (@xianzhiding) on CodePen.

第十种linear-gradient和border

.dui-tips{
	&:after{
    position: absolute;
    left: 50%;
    display: table;
    width: 10px;
    height: 10px;
    content: '';
    margin-left: -5px;
    transform: rotate(-135deg);
	}
	&:after {
    z-index: 1;
    bottom: -6px;
    background: linear-gradient(-45deg, transparent 7px, #fff 0);
    border-top: 1px solid #f60;
    border-left: 1px solid #f60;
	}
}

See the Pen 第十种linear-gradient和border by w3cbest.com (@xianzhiding) on CodePen.

第十一种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;
  }
}

See the Pen 第十一种outline by w3cbest.com (@w3cbest) on CodePen.

赞(1) 打赏
未经允许不得转载:W3Cbest前端开发>css多种方法实现一个tips带有描边的小箭头

相关推荐

发表评论