百度地图需要做气泡对话框的提示,如果通过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!