css3怎样实现一个梯形出来

CSS3如何实现一个梯形

在CSS3中，我们可以使用transform属性中的skew()函数来扭曲一个矩形元素，从而实现梯形的效果。

.trapezoid {
  width: 100px;
  height: 50px;
  background-color: #007bff;
  transform: skew(20deg);
}

这里将一个200*100矩形元素扭曲20度来创建一个梯形，强制梯形宽度是100像素，而不是使用元素本身的400像素.

如何在一个梯形中添加内容

当有内容需要添加到梯形中时，我们需要再次使用transform样式将内容进行反向扭曲来保持正常的可读性。

.trapezoid {
  width: 200px;
  height: 50px;
  background-color: #007bff;
  transform: skew(20deg);
}

.trapezoid-inner {
  transform: skew(-20deg);
}

这里我们将反向扭曲了另一个内部元素，使其将内容以正常的方式呈现，实现梯形元素的最终设计。

如何将梯形元素应用于背景

梯形也可以用在背景图像中, 我们可以使用伪元素，并将扭曲应用于它们。

.trapezoid {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.trapezoid:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transform: skew(-20deg);
  background-image: url("background-image.png");
}

上述代码将伪元素应用于一个梯形背景，可以通过z-index设置它们的层级效果。

如何实现一个倾斜拐角梯形

倾斜拐角梯形可以使用一个正常矩形元素和一个伪元素两者配合来实现。然后，我们可以将它们两个结合起来，使用CSS 3D效果来创建一个倾斜拐角梯形。

.trapezoid {
  position: relative;
  width: 150px;
  height: 70px;
  background-color: #007bff;
}

.trapezoid:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background-color: inherit;
  transform: skew(-45deg) translateX(-50%);
}

.trapezoid:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  background-color: inherit;
  transform: skew(-45deg) translateX(50%);
}

上述代码将左侧50%以逆时针方向扭曲45度，右侧50%以顺时针方向扭曲45度，使用CSS 3D效果来创建一个倾斜拐角梯形。