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;
	}
}
相关推荐
老家的回忆4 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W9 分钟前
uniapp全局状态管理实现方案
前端
Vertira10 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
牧杉-惊蛰12 分钟前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
PeterJXL44 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端