線性漸變不適用於 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>