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

效果图

代码实现

使用伪元素进行绘制:

css 复制代码
<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;
	}
}
相关推荐
星语卿1 分钟前
浏览器重绘与重排
前端·浏览器
西瓜_号码3 分钟前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
小小小小宇16 分钟前
前端实现合并两个已排序链表
前端
yngsqq34 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk37 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan38 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE42 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年44 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能1 小时前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房1 小时前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端