这是我参与更文挑战的第12天，活动详情查看： 更文挑战

使用 css 写三角形

我们以如下效果图作为示例来讲解。

我们可以看到“聊天框”是一个包裹着文字的图形，这个图形不是图片来的，其实是用 css 写的两个部分合并得来，一个是左边突出的三角形，另一个是右边带有圆边框的长方体。

右边的图形实现很简单，加个 border-radius 就可以解决，但是左边的三角形应该怎么写呢？

揭秘 css 中的三角形

这个三角形其实是由 border 来组成。我们先看下以下代码。

<style>
    .triangle {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      border: 40px solid #cde6c7;
    }
</style>

<div class="triangle"></div>
复制代码

我们可以看到在一个宽高为 0 的 div 里，设置 20px 的 border，会形成一个正方形。

border 其实是分为四部分：上右下左，我们试试把四部分分别用不同的颜色显示出来。

.triangle {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      border: 40px solid transparent;
      border-left-color: tomato;
      border-right-color: #cde6c7;
      border-top-color: wheat;
      border-bottom-color: thistle;
}
复制代码

有没有发现其实这个正方形的 border 是由四个三角形组成的。那么好了，如果我们要获得右边绿色的三角形，其他三个三角形的颜色直接设置为透明（transparent），不就可以获得右边的三角形吗？

.triangle {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      border: 40px solid transparent; /* 注意这里的 transparent */
      /* border-left-color: tomato; */
      border-right-color: #cde6c7;
      /* border-top-color: wheat; */
      /* border-bottom-color: thistle; */
}
复制代码

我们还需要调整一下三角形的大小和形状，如果只调整整体 border 的宽度，三角形的大小只能按照比例更改，而无法更变三角形的形状。

.triangle {
    ...
    border: 20px solid transparent;
    ...
}
复制代码

改变三角形形状

我们有时候要写的三角形并不是如上述的形状，如果需要改变形状，那应该去改变局部的 border 宽度。注意这里说的“宽度”不是常规的“宽度”，是指边到中心点的最短距离，比如：我们设置了 border 的右边部分宽度。

.triangle {
    ...
    border-right-width: 90px;
    ...
}
复制代码

在这个图里可能还看不出，改变的是哪里的宽度，看起来好像右半部分都变长了。如果把各个边到中心点的最短距离画出来，我们就发现只有右边的边距变长了，导致 border 的上下部分也被拉长了，这正是 border-right-width 的作用。

如果我们把 border 的上面的三角形的宽度改变，可以看到“蓝线”变长了。

.triangle {
    ...
    /* border-right-width: 90px; */
    border-top-width: 90px;
    ...
}
复制代码

因此，我们可以利用这个特性去写各种三角形。

实现聊天框

知道三角形的原理后，我们就可以写开头所说的聊天框了，三角形建议用伪元素来写，容器写上 relative 定位，伪元素用 absolute 定位，这样更好将三角形定位到聊天框的位置。

<style>
.word {
      position: relative;
      display: inline-block;
      padding: 10px 20px;
      background: #cde6c7;
      border-radius: 10px;
      font-size: 16px;
      color: #000;
}
.word:before {
      content: ''; /* 使用伪元素，一定要写上 content */
      position: absolute;
      top: 50%;
      left: -15px;
      transform: translateY(-50%);
      display: block;
      border: 8px solid transparent;
      border-right-color: #cde6c7;
}
</style>

<div class="word">聊天框</div>
复制代码

拓展

你有木有发现，其实这个方法不但适合用来写三角形，还适合用来写一些复杂的图形，比如我们可以利用两个三角形组成一个简单的时间漏斗形状（这里还用到了 border-radius）。

.triangle {
    position: absolute;
    top: 50%;
    left: 20%;
    display: inline-block;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-top-color: wheat;
    border-bottom-color: wheat;
    border-radius: 20px;
}
复制代码

我们还可以改变 div 的宽高，来改变图形。

.triangle {
    ...
    width: 15px;
    height: 15px;
    ...
}
复制代码

加一个背景颜色給它，又是不同的图案。

.triangle {
    ...
    background-color: tan;
    ...
}
复制代码

结语

总之，在 css 的世界里，有很多的东西都很奇妙，一个简单的 border 竟然可以玩出这么多花样。赶紧去动手写写吧！