绘制对话框

使用配合border可以绘制三角形,再结合伪元素将之附在文本框中即可。

<div id="box"></div>
#box
  width: 200px;
  height: 100px;
  background-color: #0f0;
  border-radius: 6px;
  margin-left: 80px;
  position: relative;
  &::after
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    left: -30px;
    border-top: 3px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 0 solid transparent;
    border-right: 30px solid #0f0;
    transform: rotate(-10deg) translate(0, 8px);

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress