default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-05-29 15:01(UTC)

Demo

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

note_3_0.png

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

CSScontent_copyCopy codes
.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_copyCopy codes
<div class='helper'>
	<div class='helper-arrow'></div>
	<h3>提示/帮助用</h3>
</div>

visibility 1093


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel