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

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