JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="caret">
     <span class="triangle1"></span>
     <span class="triangle2"></span>
  </div>
  <p>
  css绘制三角形气泡
  </p>
</div>

CSS

body,p{margin:0;padding:0;background:#fff;}
        #container{
            margin:0 auto;
            position:relative;
            width:400px;
            height:100px;
            border:10px solid #81A7FF;
        }
        #caret{
            position:absolute;
            width:50px;
            height:50px;
            left:100px;
            bottom:-50px;
        }
        .triangle1,.triangle2{

            display:block;
            height:0;/*将宽高都设置为0*/
            width:0;
            line-height:0;
            border-style:solid dashed dashed dashed;
        }
        .triangle1{
            border-width:50px;
            border-color:#81A7FF transparent transparent transparent;
        }
        .triangle2{
            position: absolute;
            top:-14px;/*这个数据三角函数是计算出来的*/
            border-width:50px;
            border-color:#fff transparent transparent transparent;
        }
        p{color:#81A7FF;text-align: center;line-height: 100px;}