纯CSS实现气泡框效果

目标效果

实现

<div class="pop triangle-border">Hello</div>

/* 气泡框类*/
.pop {
 ...
}

/* 气泡尖角伪元素*/
.triangle-border:before {
  content: '';
  position: absolute;
  top: 10px; /* controls vertical position */
  bottom: auto;
  left: -8px;
  border-width: 6px 8px 6px 0;
  border-style: solid;
  border-color: transparent @theme-color;
  /* reduce the damage in FF3.0 */
  display: block;
  width: 0;
}

.triangle-border:after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: auto;
  left: -7px;
  border-width: 6px 8px 6px 0;
  border-style: solid;
  border-color: transparent #f7f7f7;
  /* reduce the damage in FF3.0 */
  display: block;
  width: 0;
}

参考

https://ruanyifeng.com/blog/2010/04/css_speech_bubbles.html
https://nicolasgallagher.com/pure-css-speech-bubbles/
https://nicolasgallagher.com/pure-css-speech-bubbles/demo/