百度地图标注提示框CSS气泡对话框实现属性解决方案

阅读 89

2022-03-12


百度地图标注提示框CSS气泡对话框实现属性解决方案_f5

百度地图需要做气泡对话框的提示,如果通过CSS实现;

HTML:

<div class="main">
</div>

CSS:

.main {
position: relative;
width: 180px;//内容框宽度
height: 150px;//内容框高度度
background:#000;
border-radius: 10px;
}
.main:after {
position: absolute;
top: 100%;//自适应内容框高度定位
left: 20px;
width: 30px;//小尾巴的内容宽度,大小决定是否出现漏斗
height: 30px;//小尾巴的内容宽度,大小决定是否出现漏斗
content: '';
box-sizing: border-box;
border-top: 30px solid transparent;
border-left: 30px solid #f3f5f6;
border-right: 30px solid #f3f5f6;
background: inherit;//继承内容框背景色
background-position: -20px bottom;
background-origin: border-box;
}

Done!



精彩评论(0)

0 0 举报