前端css实现冒泡气框

<div class="tag_pop">

<p class="poptag1">
    <span id="poptag1-left">普通下载</span>
    <span id="poptag1-middle">|</span>
    <span id="poptag1-right">无接通记录</span>
</p>

</div>

 .tag_pop{
            position:absolute;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            margin-top:40px;
            margin-left:-45px;
            width:428px;
            height:78px;
            background: #F8F9FF;
            border: 1px solid #CCD7FF;
            box-shadow: 0 7px 12px 0 rgba(171,190,255,0.39);
            padding:0px 20px;
            color: #808080;
            z-index: 9;
            display: none;
        }
    .tag_pop:before,.tag_pop:after{
        content:"";
        display:block;
        border-width:8px;
        position:absolute; 
        /*bottom:-40px;*/
        left:45px;
        top:-16px;
        border-style:solid dashed dashed;
        /*border-color:#09F transparent transparent;*/
        border-color: transparent transparent #CCD7FF;
        font-size:0;
        line-height:0;
    }
    .tag_pop:after{
        top:-14px;
        border-color:transparent transparent #FFF;
    }
    #poptag1-left{
        display: inline-block;
        line-height: 20px;
        font-size: 14px;
        color: #333333;
        margin-right:20px;
        font-weight: bold;
    }
    #poptag1-middle{
        color:#979797;
        opacity: 0.34;
        display: inline-block;
        margin-right:20px;
    }
    #poptag1-right{
        font-size: 12px;
        line-height: 17px;
        /*margin-left:20px;*/
    }
    .poptag2{
        line-height: 20px;
    }