用css伪元素简单实现冒泡气框的制作

用伪类实现冒泡气框

实现的效果如下：

html结构：

<div class="tag_pop">
    <p class="tag_pop1">
	<span>保接通下载</span>
	<span>|</span>
	<span>最近接通时间</span>
    </p>
    <p class="tag_pop2">
        该求职者已经开启号码保护，此联系方式为通话密号替代的真实号码
    </p>
</div>

css样式：

.tag_pop{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        position: absolute;
        z-index: 9;
        /*display: none;*/
        width: 470px;
        height: 88px;
        top:40px;
        left:46px;
        padding:8px 10px;
        color: gray;
        border: 1px solid #ccd7ff;
        background: #FFFFFF;
        box-sizing: border-box;
    }
    .tag_pop:before{
        width: 0;
        height:0;
        content: "";
        border:14px solid #ccd7ff;
        position:absolute;
        border-color: transparent transparent #ccd7ff;
        top:-28px;
        left:40px;
    }
    .tag_pop:after{
        width: 0;
        height:0;
        content: "";
        border:14px solid #ccd7ff;
        position:absolute;
        border-color: transparent transparent #FFFFFF;
        top:-26px;
        left:40px;
    }
    .tag_pop1,.tag_pop2{
        height: 20px;
        line-height: 20px;
    }

html加其他内容也不会影响样式哦~