default
menu home
arrow_drop_down
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

纯CSS3做一个带箭头指向的漂亮的带阴影提示框

style分类标签： 全部 CSS html javascript php/other IT
by: fanshome  2023-05-29 15:01(UTC)
演 示

纯CSS3，不使用图片。先看下最终实现的效果图：

note_3_0.png

这里以指向右侧的尖形小箭头为例，其它方向请自行修改。

CSScontent_copy复制代码
.helper{
padding:16px;right:100px;top:200px;border-radius:4px;min-width:80px;
position:fixed;z-index:10;background:#333;color:#fff;
box-shadow:2px 2px 6px 4px rgb(0 0 0 / 34%)
}
.helper-arrow{
width:12px;height:12px;right:-6px;top:calc(50% - 6px);display:block;position:absolute;
background:#f00;transform:rotate(45deg);
box-shadow:2px 2px 6px 4px rgb(0 0 0 / 34%)
}

其中，小箭头部分其实是使用了一个小正方形旋转45°实现的（transform:rotate(45deg);），演示时为了表现的更清楚，特意使用红色突出显示。

实际使用时，把小方块背景色改成和helper一致的背景色即可。

htmlcontent_copy复制代码
<div class='helper'>
	<div class='helper-arrow'></div>
	<h3>提示/帮助用</h3>
</div>

visibility 2038

- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消