CSS轻松画梯形，DIY图形设计超简单！

2022-12-05 21:38:22

使用CSS绘制梯形：一步一步轻松上手

在网页设计中，创造视觉上令人惊叹的元素可以提升用户体验。梯形是一种形状独特、用途广泛的多功能图形元素，可用于创建徽标、横幅或任何需要几何精确性的设计。虽然你可能会认为用CSS绘制梯形很复杂，但它实际上非常简单且有趣。

创建容器元素

第一步是创建一个充当梯形容器的空div元素。这个元素将容纳两个伪元素，它们将形成梯形的形状。

<div id="trapezoid-container"></div>

添加伪元素

使用伪元素::before和::after，为容器元素添加两个附加元素。这两个伪元素将定义梯形的形状。

#trapezoid-container::before,
#trapezoid-container::after {
  content: "";
  position: absolute;
  top: 0;
}

设置宽度和高度

下一步是设置伪元素的宽度和高度，这将确定梯形的大小。对于示例，我们将设置::before的宽度为200px，高度为100px，::after的宽度为100px，高度为100px。

#trapezoid-container::before {
  width: 200px;
  height: 100px;
}

#trapezoid-container::after {
  width: 100px;
  height: 100px;
}

设置背景颜色

为伪元素设置不同的背景颜色，这将形成梯形的颜色组合。对于示例，我们使用红色为::before，绿色为::after。

#trapezoid-container::before {
  background-color: #ff0000;
}

#trapezoid-container::after {
  background-color: #00ff00;
}

使用CSS三角形方法

现在有趣的部分来了，使用CSS三角形方法将伪元素旋转到适当的角度，形成梯形的形状。使用transform: rotate(-45deg)将::before逆时针旋转45度，使用transform: rotate(45deg)将::after顺时针旋转45度。

#trapezoid-container::before {
  transform: rotate(-45deg);
}

#trapezoid-container::after {
  transform: rotate(45deg);
}

示例代码

为了更直观的理解，以下是完整的代码示例，它将在页面上创建一个红色和绿色梯形：

<!DOCTYPE html>
<html>
<head>
  <style>
    #trapezoid-container {
      width: 300px;
      height: 200px;
      position: relative;
    }

    #trapezoid-container::before,
    #trapezoid-container::after {
      content: "";
      position: absolute;
      top: 0;
    }

    #trapezoid-container::before {
      width: 200px;
      height: 100px;
      background-color: #ff0000;
      transform: rotate(-45deg);
    }

    #trapezoid-container::after {
      width: 100px;
      height: 100px;
      background-color: #00ff00;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div id="trapezoid-container"></div>
</body>
</html>