使用 div 制作三角形 - CSS

在 CSS 中，可以使用 div 元素和伪元素来制作三角形。这种方法简单易懂，并且在设计网页时非常常见。

制作三角形

制作一个由两个直角三角形组成的正方形：

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

对应的 CSS 代码：

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
  border-left: 50px solid transparent;
}

这个 CSS 代码使用 border 属性来设置边框的样式。由于三角形的底部是透明的，所以我们只需要设置上边框、右边框和下边框。

制作箭头

除了制作三角形，我们还可以通过 CSS 制作箭头。

制作一个朝上的箭头：

<div class="arrow-up"></div>

对应的 CSS 代码：

.arrow-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

这个 CSS 代码同样使用 border 属性来设置边框的样式，三个边框都是实心的，只有顶端的边框没有设置。因此，最终的效果是一个朝上的箭头。

同样，我们可以通过调整边框的样式和位置，制作出不同方向的箭头。这种方法简单易懂，值得在日常开发中掌握。

总结

使用 div 制作三角形和箭头是 CSS 中一个比较实用的技巧，掌握这种方法可以在日常开发中快速实现一些小的效果。技巧虽然简单，但是在实践中还需要注意一些细节和兼容性问题。