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;
	}
}
相关推荐
薛定谔的算法12 分钟前
Vue.js 条件渲染与列表渲染详解:原理、用法与最佳实践
前端·vue.js·前端框架
_前端小李_21 分钟前
关于预检请求
前端
李游Leo22 分钟前
JavaScript事件机制与性能优化:防抖 / 节流 / 事件委托 / Passive Event Listeners 全解析
开发语言·javascript·性能优化
复苏季风22 分钟前
Vue3 小白的疑惑:为什么用 const 定义的变量还能改?
前端·javascript·vue.js
扉川川23 分钟前
File和Blob对象的区别
javascript
Mintopia24 分钟前
在 Next.js 中接入 Google Analytics 与 PostHog —— 一场“数据偷窥”的艺术演出
前端·javascript·next.js
遂心_24 分钟前
React useState:20分钟彻底掌握这个让你"状态满满"的Hook
前端·javascript·react.js
月亮慢慢圆26 分钟前
Web Animation API
前端
Mintopia26 分钟前
AIGC驱动的Web界面设计:技术逻辑与用户体验平衡
前端·javascript·aigc
盏茶作酒2929 分钟前
浅拷贝和深拷贝
前端·javascript