面试一之聊天气泡实现

废话：本人目前大学生，正在准备面试参与工作，有些比较实用到功能或者组件实现、面试题会在有时间到时候写博分享出来。

聊天气泡实现

今天要做的是如何实现聊天时候的气泡效果，如图：

要实现这个，最困难的其实就是在于那个边上的小三角形。如果降低一下需求，那么就是：

噢～太简单了

.class2 {
      display: inline-block;
      padding: 10px 15px 10px 20px;
      background-color: #9fe766;
      font-size: 28px;
      border-radius: 5px;
    }

事实上，要在这个基础上，加上一个三角形，只要知道以下的知识点就够了（敲黑板！）
我们给一个<div class="class1"></div>写如下的样式：

.class1 {
      width: 0;
      height: 0;
      border-top: 20px solid red;
      border-left: 20px solid yellow;
      border-right: 20px solid green;
      border-bottom: 20px solid black;
    }

可以看到效果图如下：

OK，我们需要的是一个向右的三角块，所以我们把其他三个方向的颜色设置成 transparent（透明色）

nice ，这就是我们想要的。那么接下来的问题就是把三角块和气泡拼接到一起了。

.class2 {
      position: relative;
      display: inline-block;
      padding: 10px 15px 10px 20px;
      background-color: #9fe766;
      font-size: 28px;
      border-radius: 5px;
    }
    .class2::before {
      position: absolute;
      top: 20px;//调整垂直偏移量
      left: 100%;//调整水平偏移量
      content: "";//因为使用伪类元素，所以需要一个content为空将元素大小撑起来
      display: inline-block;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-left: 10px solid #9fe766;
      border-right: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }

这个就是我们需要实现的效果啦。
可以适当修改border-top/left/right/bottom的大小，获得其他的稍微不一样一点的三角块。


当然，这个方法有一个小缺陷，无法做那种倾角很夸张的三角块。
原因就是使用border-top/left/right/bottom能达到的最大倾角就是90度，也就是下图中的倾角从1位置到2位置。

至于参数值可以改成负值吗？对不起，我试过了，没用的。