线性渐变不适用于 div

Question

我正在使用以下 CSS 创建梯形：

.trapezoid {
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
  background: linear-gradient(red, yellow);
}

<div class='trapezoid'></div>

线性渐变属性无效。我想要梯形作为阴影，即它的颜色最终应该消失。谁能帮我解决这个问题？

Answer 1

您不能以这种方式应用渐变，因为您使用的是边框，并且您的元素的高度为 0，因此背景将不可见。

相反，您可以尝试使用多重渐变来创建形状：

.trapezoid {
  height: 100px;
  width: 200px;
  background: 
  linear-gradient(to bottom left,white 50%,transparent 52%) 100% 0/40px 100% no-repeat,
  linear-gradient(to bottom right,white 50%,transparent 52%) 0 0/40px 100% no-repeat,
  linear-gradient(red, yellow);
}

<div class='trapezoid'></div>

或使用clip-path:

.trapezoid {
  height: 100px;
  width: 200px;
  background: linear-gradient(red, yellow);
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

<div class='trapezoid'></div>

另一种有偏斜和pseudo-element的方法：

.trapezoid {
  height: 100px;
  width: 200px;
  position: relative;
}

.trapezoid:before,
.trapezoid:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 60%;
  background: linear-gradient(red, yellow);
  transform:skew(20deg);
  transform-origin:bottom right;
}
.trapezoid:after {
  left: 0;
  transform:skew(-20deg);
  transform-origin:bottom left;
}

<div class='trapezoid'></div>

Answer 2

或者对大小合适的元素（或 pseudo-element）使用变换。

.trapezoid {
  width: 100px;
  height: 100px;
  margin: auto;
  transform: perspective(100px) rotateX(40deg);
  background: linear-gradient(red, yellow);
}

<div class='trapezoid'></div>

线性渐变不适用于 div

Linear gradient not working with div

html

css

linear-gradients

css-shapes