css伪元素制作气泡对话框

1、气泡对话框div

 <div class="tipContent">
      I love it when you call me Senorita
 </div>

2、用css的伪元素制作小尖角

 .tipContent {
    position: relative;
    margin-left: 20px;
    display:inline-block;
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px 5px;
    border-radius: 4px;
  }
  /* 下面若是不好掌控，则先把left或者top置为0，再慢慢移 */
  .tipContent::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent #dddddd transparent transparent;
    left:-20px;
  }
  .tipContent::after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent #fff transparent transparent;
    left:-18px;
    top: 8px;
  }

效果如图