纯CSS画三角？还很灵活？这究竟是魔法还是科技？

2024-01-04 16:06:20

纯CSS画三角的原理

CSS中没有直接绘制三角形的属性，但我们可以利用其他元素来模拟三角形。最常用的方法是使用边框（border）和伪元素（pseudo-element）来实现。

1. 使用边框绘制三角形

边框是HTML元素周围的装饰性线。它可以是实线、虚线或双线，也可以有不同的颜色和宽度。我们可以利用边框的这些属性来模拟三角形。

例如，我们可以将一个元素的顶部边框设置为粗线，而其他三条边框设置为无边框。这样就会形成一个倒立的三角形。

.triangle {
  width: 100px;
  height: 100px;
  border-top: 10px solid black;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

2. 使用伪元素绘制三角形

伪元素是HTML元素的虚拟子元素。它可以用来添加一些额外的样式，而不会影响元素本身的内容。我们可以利用伪元素来模拟三角形。

例如，我们可以创建一个伪元素，并将其定位在元素的右上角。然后将伪元素的边框设置为粗线，并使其与元素的背景色相同。这样就会形成一个向右的三角形。

.triangle {
  width: 100px;
  height: 100px;
  position: relative;
}

.triangle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid black;
  border-right: 10px solid transparent;
  border-bottom: 0;
  border-left: 0;
}