三角之旅：用CSS绘制三角形的艺术

2023-09-08 02:59:53

从基础开始：理解CSS的Box模型
在深入三角形绘制之前，我们先来了解CSS的Box模型。它将元素视为一个矩形盒子，由内容、内边距、边框和外边距四个部分组成。通过操纵这些属性，我们可以创建出各种形状，包括三角形。

方法一：巧用border属性

1. 纯色边框三角形

利用border属性，我们可以轻松绘制一个纯色边框三角形。通过设置不同的border-width和border-color值，可以控制三角形的边框粗细和颜色。

/* 纯色边框三角形 */
.triangle-border {
  width: 0;
  height: 0;
  border-left: 50px solid red;
  border-bottom: 100px solid transparent;
  border-right: 50px solid red;
}

2. 带渐变色的边框三角形

添加渐变色到三角形的边框上，让其更具视觉冲击力。

/* 带渐变色的边框三角形 */
.triangle-gradient-border {
  width: 0;
  height: 0;
  border-left: 50px solid linear-gradient(to bottom, red, orange, yellow);
  border-bottom: 100px solid transparent;
  border-right: 50px solid linear-gradient(to bottom, red, orange, yellow);
}

方法二：伪元素三角形

1. 单色伪元素三角形

利用伪元素，我们可以创建出更加灵活的三角形。

/* 单色伪元素三角形 */
.triangle-pseudo {
  position: relative;
  width: 0;
  height: 0;
}

.triangle-pseudo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 50px solid red;
  border-bottom: 100px solid transparent;
  border-right: 50px solid red;
}

2. 带渐变色的伪元素三角形

为伪元素添加渐变色，让三角形更加生动。

/* 带渐变色的伪元素三角形 */
.triangle-pseudo-gradient {
  position: relative;
  width: 0;
  height: 0;
}

.triangle-pseudo-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 50px solid linear-gradient(to bottom, red, orange, yellow);
  border-bottom: 100px solid transparent;
  border-right: 50px solid linear-gradient(to bottom, red, orange, yellow);
}

方法三：旋转变换绘制三角形

通过旋转变换，我们可以创建出更加复杂的三角形。

/* 旋转变换绘制三角形 */
.triangle-transform {
  position: relative;
  width: 0;
  height: 0;
}

.triangle-transform::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 100px;
  height: 100px;
  background: red;
}