纯CSS实现一个气泡框

实现原理：主要通过CSS的border-color属性，结合::before、::after和position: absolute实现。

（1）画一个正方形或长方形的盒子，别忘记此盒子需加上position: relative，不然之后的绝对定位元素会相对于其余设了position: relative的父级元素或windom定位，绝对定位元素就会跑偏了。

<div class="div1"> 这是一个长方形的红色盒子 </div>

.div1{
  width: 300px;
  height: 200px;
  background: red;
  position: relative;
}

（2）开始重头戏，画个气泡框的三角形了，画之前来了解一下border-color这个属性。

border-color：用于设置上下左右四个边框的颜色。

例如border-color：red green blue yellow;分别代表了上、右、下、左边框的颜色。