CSS绘制各种三角形的技巧

在项目开发上经常有一些小细节，特别上样式上，虽然使用 UI 切一个图片我们就能实现，然而如果界面颜色风格变了，我们又得去找 UI 重新切图，而且图片的自适应其实也不是很好，所有，能用 CSS 原生实现的，我们尽量使用原生来实现，这样灵活性更好。

例如，界面上经常出现的一些对话框、切角、三角形之类的，看似复杂，其实也很简单，这些都能使用 CSS 简单的来实现。

CSS 绘制三角形其实用到的就是很常见的border 属性，在 CSS 中，我们可以给一个元素的四个方位的边框设置不同的颜色和宽度，实现三角形的诀窍就在这里。

本文示例在线地址：CSS三角形在线地址 (opens new window)

等腰三角形

首先我们定义一个三角形基本样式

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
}

普通等腰三角形绘制只需将元素宽高设为 0、border 颜色设置为透明，将直角指向方向的反方向的 border 颜色设置为三角形的颜色即可。

上三角

.top {
  border-bottom-color: red;
}

<div class="triangle top"></div>

下三角

.bottom {
  border-top-color: red;
}

<div class="triangle bottom"></div>

左三角

.left {
  border-right-color: red;
}

<div class="triangle left"></div>

右三角

.right {
  border-left-color: red;
}

<div class="triangle right"></div>

消息框

学会了等腰三角形的绘制方法，我们就可以使用 CSS 做出常见的消息框样式，例如：如下的消息框

这种常见的消息框我们分解下其实是上边的矩形框和下边的小三角构成，矩形框大家都会做，但是下面的只有 2 条直角边的三角形可能会把大家难住。大家可能会想怎么绘制出只有 2 条边的三角形呢？其实换一种想法就可以了，既然我们我可以绘制出三角形，那么我绘制一个灰色和一个白色的三角形，然后用白色的三角形盖住灰色三角的一条边，这样不就是只有 2 条边的三角形么。那么这样想其实就很简单了，我们只需把未知的问题用已知的方法来解决，一切就都迎刃而解了。

在这里，我们使用伪类来实现，避免 HTML 要素过多

<div class="msg-box">
  <div class="msg-box-content"></div>
</div>

.msg-box {
  width: 200px;
  position: relative;
}
.msg-box-content {
  background: #fff;
  height: 40px;
  border: 1px solid #ddd;
  box-shadow: 0 0 4px #ddd;
  border-radius: 8px;
  margin-bottom: 8px;
}
.msg-box-content::before {
  content: ' ';
  position: absolute;
  z-index: 1;
  left: calc(50% - 8px);
  top: 100%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #ddd;
}
.msg-box-content::after {
  content: ' ';
  position: absolute;
  z-index: 1;
  left: calc(50% - 8px);
  top: 98%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #fff;
}

如果使用sass 或者less的话，我们的 CSS 量会更少。上面样式三角形没有阴影，如果消息框和三角形都需要阴影的话，上面的样式就不合适了，解决办法是使用 2 个矩形，底部矩形带阴影，上面的矩形不带，然后 2 个旋转 45 度来处理。

直角三角形

直角三角形与等腰三角形有所不同，绘制直角三角形需要将宽、高、边框都设置为 0，将直角所在的底部或顶部边框设置宽度与颜色，并将直角所在的左侧或右侧的反方向设置宽度即可

同理，首先设置一个直角三角形的基本样式

.orth-triangle {
  width: 0;
  height: 0;
  border: 0px solid transparent;
}

左下直角

.orth-lb {
  border-bottom: 50px solid red;
  border-right-width: 50px;
}

<div class="orth-triangle orth-lb"></div>

右下直角

.orth-rb {
  border-bottom: 50px solid red;
  border-left-width: 50px;
}

<div class="orth-triangle orth-rb"></div>

左上直角

.orth-tl {
  border-top: 50px solid red;
  border-right-width: 50px;
}

<div class="orth-triangle orth-tl"></div>

右上直角

.orth-tr {
  border-top: 50px solid red;
  border-left-width: 50px;
}

<div class="orth-triangle orth-tr"></div>

切角框

学会了直接三角形，我们可以使用它来绘制如下的切角框：

处理逻辑一样，左上和右下的切角使用 2 个三角形覆盖来处理，样式如下：

.clip-content {
  position: relative;
  height: 80px;
  margin-top: 16px;
  border: 1px solid #ddd;
}
.clip-content .tl-triangle::before {
  content: ' ';
  position: absolute;
  z-index: 1;
  left: -1px;
  top: -1px;
  border-right: 16px solid transparent;
  border-top: 16px solid #ddd;
}
.clip-content .tl-triangle::after {
  content: ' ';
  position: absolute;
  z-index: 2;
  left: -1px;
  top: -2px;
  border-right: 16px solid transparent;
  border-top: 16px solid #fff;
}
.clip-content .br-triangle::before {
  content: ' ';
  position: absolute;
  z-index: 1;
  right: -1px;
  bottom: -1px;
  border-left: 16px solid transparent;
  border-bottom: 16px solid #ddd;
}
.clip-content .br-triangle::after {
  content: ' ';
  position: absolute;
  z-index: 2;
  right: -1px;
  bottom: -2px;
  border-left: 16px solid transparent;
  border-bottom: 16px solid #fff;
}

<div class="clip-content">
  <div class="tl-triangle"></div>
  <div class="br-triangle"></div>
</div>

当然这种切角还有其他的处理方法，例如使用css 的 background:linear-gradient也能实现，这里不做描述

使用CSS还可以绘制其他的图像，例如圆、椭圆、平行四边形、梯形、五角星等等，可以访问 css tricks网站 (opens new window) 查看更多。