css使用伪元素绘制带三角箭头的提示框

最新推荐文章于 2024-05-13 09:53:40 发布

像素检测仪

最新推荐文章于 2024-05-13 09:53:40 发布

阅读量732

点赞数 13

分类专栏：前端 css 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_39981639/article/details/136505446

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码实现

使用伪元素进行绘制：

<div class="my-tip"></div>
.my-tip{
	width: 128px;
	height: 100px;
	background: #FFFFFF;
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05), 0px 4px 5px 0px rgba(0,0,0,0.08), 0px 2px 4px -1px rgba(0,0,0,0.12);
	border: 1px solid #DCDCDC;
	border-radius: 4px;
	&:after,&:before{ // 绘制三角形
	    content: "";
	    position: absolute;
	    width: 0;
	    height: 0;
	    border: 8px solid transparent;
	    border-bottom-color: #DCDCDC;
	    left: 57%;
	    top: -16px;
	}
	&:after{ // 遮住边框
	    border-bottom-color: #FFFFFF;
	    top: -15px;
	}
}