div对话框气泡CSS

.box{
  position: absolute;
  display: inline-block;
  background-color: green;
  padding 10px
  line-height: 20px;
  font-size: 14px;
  top 105px
  left 250px
  z-index 9999
  border-radius 4px
}
.u-tri:before{
  position: absolute;
  left: 10px;
  top: -14px;
  content: '';
  //想要三⾓形的尖⾓⽅向朝哪边，对应的相反⼀边设置颜⾊。⽐如尖⾓向上，则boder-bottom的color上⾊，其它三边为透明。
  border-top: 8px solid transparent;
  border-bottom: 8px solid green;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

    <div class="box u-tri">
      <p>
        111111111111
      </p>
    </div>