线性渐变不适用于div

时间:2018-02-20 13:16:33

标签: html css css3 css-shapes linear-gradients

我正在使用以下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>
&#13;
&#13;
&#13;

线性渐变属性不起作用。我希望梯形为阴影,但它的颜色最终应该逐渐消失。有人可以帮我这个吗?

2 个答案:

答案 0 :(得分:1)

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

相反,您可以尝试使用多个渐变来创建形状:

&#13;
&#13;
<div class='trapezoid'></div>
&#13;
.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%);
}
&#13;
&#13;
&#13;

或使用clip-path:

&#13;
&#13;
<div class='trapezoid'></div>
&#13;
.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;
}
&#13;
&#13;
&#13;

另一种使用skew和伪元素的方法:

&#13;
&#13;
<div class='trapezoid'></div>
&#13;
$budgetAdmins.on('select2:open', e => {
    var timer = setTimeout(() => {
        jQuery('html, body').trigger('scroll');
    }, 1);
});
&#13;
&#13;
&#13;

答案 1 :(得分:1)

或者对适当大小的元素(或伪元素)使用变换。

.trapezoid {
  width: 100px;
  height: 100px;
  margin: auto;
  transform: perspective(100px) rotateX(40deg);
  background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>