700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > CSS绘制气泡对话框样式(有边框)

CSS绘制气泡对话框样式(有边框)

时间:2024-04-15 23:48:39

相关推荐

CSS绘制气泡对话框样式(有边框)

1、效果图

2、难点和思路

难点:上面那个带边框的小三角不好实现

思路:画两个不同大小的div,使其基本重叠(两个大小不同,不完全重叠,让红色的露出一点边边),让白色div放到最上层(设置z-index)

3、代码实现

<p class="pSanStyle"><p class="pSanStyleInner"></p></p><div class="divStyle"><p style="padding: 10px 0 0 10px; font-weight: bold">项目</p><hr style="width: 240px" /><a-row><a-col :span="7" style="border-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px">项目名称</a-col><a-col :span="7" style="border-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px">项目名称</a-col><a-col :span="7" style="margin: 5px 0 5px 5px">项目名称</a-col></a-row></div>

.pSanStyle {width: 0;height: 0;position: relative;border: 10px solid transparent;border-color: transparent transparent red transparent ;margin-left: 50px;}.pSanStyleInner{width: 0;height: 0;border: 12px solid transparent;border-color: transparent transparent white transparent ;position: absolute;margin-left: -11.5px;margin-top: -10px;z-index: 21;}.divStyle {position: absolute;width: 260px;height: 150px;margin-top: 20px;background-color: white;padding: 10px;border: 1px solid red;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。