线性渐变不适用于 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>

或使用剪辑路径：

 .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>

另一种带有偏斜和伪元素的方法：

 .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

或者在适当大小的元素（或伪元素）上使用变换。

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

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