Linear gradient not working with div

Question

I am creating trapezoid using following 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>

The linear-gradient attribute is not working. I want the trapezoid as shadow i.e its color should eventually fade away. Can anyone please help me on this?

it won't work beause the height is 0

Temani Afif
– Temani Afif

2018-02-20 13:17:38 +00:00
Commented Feb 20, 2018 at 13:17 — Temani Afif
– Temani Afif, Commented Feb 20, 2018 at 13:17
..and you can't have gradient borders.

Paulie_D
– Paulie_D

2018-02-20 13:17:58 +00:00
Commented Feb 20, 2018 at 13:17 — Paulie_D
– Paulie_D, Commented Feb 20, 2018 at 13:17
Can anyone suggest some work arounds with minimal change?

user3681970
– user3681970

2018-02-20 13:20:46 +00:00
Commented Feb 20, 2018 at 13:20 — user3681970
– user3681970, Commented Feb 20, 2018 at 13:20

Paulie_D · Accepted Answer · 2018-02-20 13:22:04Z

1

Or use a transform on a suitably sized element (or pseudo-element).

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

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

answered Feb 20, 2018 at 13:22

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3681970 Over a year ago

Thanks a ton :) very simple and elegant solution! Worked like a charm

Temani Afif · Accepted Answer · 2018-02-20 13:38:06Z

1

You cannot apply gradient in this way as you are using border and your element has a height of 0 so background won't be visible.

Instead you can try to use multiple gradient to create the shape:

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

Or use 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>

Another method with skew and 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>

edited Feb 20, 2018 at 13:38

answered Feb 20, 2018 at 13:20

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

2 Comments

user3681970 Over a year ago

Hi Can you please explain your code as well? Regarding what attribute are forming the trapezoid?

Temani Afif Over a year ago

@user3681970 i used 3 gradient, the main one, and 2 with white color to hide the non-needed part, then simply adjust the value to see ;) i also added another solution

Collectives™ on Stack Overflow

Linear gradient not working with div

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related