用CSS实现对话气泡框

    <div class="bubbleBox"></div>

    .bubbleBox{
        width: 200px;
        height: 100px;
        border: 2px  solid #ff0;
        border-radius: 7px;  /*圆角弧度为7px*/
        position: relative;
    }
    /* 三角形 */
    .bubbleBox::before{
        content: '';
        width: 0;
        height: 0;
        border: 20px solid;
        position: absolute;
        bottom: -40px;
        left: 140px;
        border-color:  #ff0 transparent transparent;
    }
    /* 白色三角形填充 */
    .bubbleBox::after{
        content: '';
        width: 0;
        height: 0;
        border: 20px solid;
        position: absolute;
        bottom: -36px;
        left: 140px;
        border-color:  #fff transparent transparent;
    }