CSS 绘制三角形和带边缘色的气泡聊天框

CSS 绘制三角形

先画一个正方形：

<div class="filled-triangle"></div>

.filled-triangle {
  width: 100px;
  height: 100px;
  border: 1px solid cyan;
}

然后将宽高均设为0，只留下四个 border ：

.filled-triangle {
  width: 0;
  height: 0;
  border-bottom: 50px solid cyan;
  border-top: 50px solid blueviolet;
  border-left: 50px solid chartreuse;
  border-right: 50px solid gold;
}

现在我们已经得到四个三角形了，想要哪个三角形，就保留哪个三角形的颜色，其他都设为透明：

.filled-triangle {
  width: 0;
  height: 0;
  border-bottom: 50px solid cyan;
  border-top: 50px solid transparent;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

其实不需要把四个 border 都设置一遍，只需要设置想要画的三角形所涉及到的三条边的 border 即可：

.filled-triangle {
  width: 0;
  height: 0;
  border-bottom: 50px solid cyan;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

CSS 绘制带边缘色的气泡聊天框

首先画一个圆角矩形：

<div class="message-box">2333</div>

.message-box {
  position: relative;
  width: 300px;
  height: 60px;
  padding: 10px;
  border: 1px solid cyan;
  border-radius: 8px;
}

然后画一个深色的三角形：

.message-box::before {
  position: absolute;
  left: -10px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid cyan;
  content: "";
}

再画一个白色的三角形盖上去，错位2个像素：

.message-box::after {
  position: absolute;
  left: -8px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #FFF;
  content: "";
}