CSS如何定义一个三角

前言

在前端开发过程中经常会遇到画几何图形（三角形），比如需要在聊天气泡上添加一个三角形。那么我们如何实现呢？下面将介绍通过CSS实现的方式。

正文

解决思路：
通过伪元素（:before和:after）在目标元素上添加一个block元素，并把元素的宽和高设为0，然后通过设置border的transparent属性来设置指定边框的颜色为透明即可。
实例代码：

currentPage-box::before {
  position: absolute;
  top: -1px;
  right: -8px;
  display: block;
  width: 0;
  height: 0;
  content: ' ';
  border-color: transparent transparent transparent #a8ccef;
  border-style: solid;
  border-width: 17px 0 17px 8px;
}

如果想要又有边框的三角，可以在外面在叠加一层，利用绝对定位来错位来实现视觉效果。

currentPage-box::after {
  position: absolute;
  top: -1px;
  right: -7px;
  display: block;
  width: 0;
  height: 0;
  content: ' ';
  border-color: transparent transparent transparent #e9f2fb;
  border-style: solid;
  border-width: 17px 0 17px 8px;
}