CSS border 生成三角形技术原理 | 青训营笔记

介绍

在 CSS 中运用 border 特点创立三角形的原理：每个 border 都有一个宽度、一个款式和一个颜色，能够设置不同的 border 宽度和款式来创立各种形状。

生成三角形

HTML 代码如下：

<div class="test"></div>

CSS 代码如下：

.test {
  width: 50px;
  height: 50px;
  border-left: 50px solid lime;
  border-right: 50px solid blue;
  border-top: 50px solid red;
  border-bottom: 50px solid magenta;
}

div 运用了上面这个款式后，成果如下：

现在，假如咱们现在只保留一个一个上边框，其他边框均为 transparent 透明（或与背景色同色），那么是不是就只显示一个上面赤色的边框了，咱们测试下，与上面的代码相似，仅仅修正下其他三个边框的颜色。

.test {
  width: 50px;
  height: 50px;
  border: 50px solid;
  border-color: #ff0000 #ffffff #ffffff #ffffff;
}

得到的是一个梯形，成果如下图：

假如把 div 的高宽都变成 0，只留一边，不就是三角了吗？代码如下：

.test {
  width: 0;
  height: 0;
  border: 50 px solid;
  border - color: #ff0000 #ffffff #ffffff #ffffff;
}

上图为等腰直角三角形，之所以为等腰直角，是因为所有的边框宽度是相同的，假如咱们将边框宽度设置为不同，则会构成等腰三角形。

.test {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 30px;
  border-color: #ff0000 #ffffff #ffffff #ffffff;
}

要更改箭头的方向，只需要对 border-width 和 border-color 进行修正即可：

.test {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 50px;
  border-color: #ffffff #ffffff #ffffff #ff0000;
}

能够不局限于保留一条边框，也能够保留两条，所以咱们能够离别等腰，得到愈加锐利的三角：

.test {
  width: 0;
  height: 0;
  border-width: 20px 10px;
  border-style: solid;
  border-color: blue blue #ffffff #ffffff;
}

下面是这种形状的一个运用 – 消息框底部箭头：

总结

运用 CSS border 特点创立三角形有以下好处：

1. 轻量级：与运用图片或 SVG 等其他方法比较，运用 CSS border 特点创立三角形能够减少对服务器的请求，然后提高页面加载速度，特别是关于需要频繁运用的小型图形而言。
2. 灵活性：运用 CSS border 特点能够创立各种不同形状的三角形，能够根据需要调整巨细和颜色，一起不需要额外的代码或工具。
3. 响应式规划：运用 CSS border 特点创立的三角形能够随着屏幕巨细和设备类型的变化主动调整巨细和位置，然后实现响应式规划。
4. 可维护性：运用 CSS border 特点创立三角形能够使代码更易于维护。当需要更改三角形的巨细或颜色时，只需要修正 CSS 特点值即可，而无需编辑图像或其他代码。
5. 兼容性：运用 CSS border 特点创立三角形不需要运用特殊的浏览器插件或其他技术，因而能够在各种浏览器和设备上正常工作。

综上所述，运用 CSS border 特点创立三角形是一种简单、灵活、响应式、可维护、兼容性好的方法，能够协助开发人员创立高效且牢靠的界面元素。

参考资料

1. CSS border三角、圆角图形生成技术简介