Applying a gradient to an oblique div

Question

I used the following CSS to make a trapezoidal div using a CSS trick with angular borders:

#slopedDiv {
  position: absolute;
  height: 0;
  width: 100px;
  border-style: solid;
  border-color: #DC0714 transparent;
  border-width: 248px 125px 0 0;
}

<div id="slopedDiv"></div>

Run codeHide result

Is it possible to apply a vertical linear gradient to the resulting shape? I tried to use it border-image, but it just makes him lose the angle as far as I managed to control it.

Answer 1

One option can be used skew()for a pseudo-element, and not for the border trick:

#slopedDiv {
  width: 200px;
  overflow: hidden;
}

#slopedDiv:before {
  content: "";
  display: block;
  height:100px;
  background: linear-gradient(to right, rgba(11, 11, 87, 1) 0%, rgba(150, 66, 87, 1) 100%);
  transform:skew(-25deg) translateX(-50px)
}

<div id="slopedDiv"></div>

Run codeHide result

---

Inclined div with text.

#slopedDiv {
  width: 200px;
  overflow: hidden;
}

#slopedDiv div {
  background: linear-gradient(to right, rgba(11, 11, 87, 1) 0%, rgba(150, 66, 87, 1) 100%);
  transform: skew(-25deg) translateX(-50px);
}

#slopedDiv h2 {
  color: white;
  letter-spacing:2px;
  padding: 25px 30px;
  transform: skew(25deg) translateX(50px);
}

<div id="slopedDiv">
  <div>
    <h2>My Title Here</h2>
  </div>
</div>

Run codeHide result

Answer 2

div , , 2 . - , , - , ( )

.test {
  width: 400px;
  height: 300px;
  background-image: linear-gradient(-71deg, white 100px, transparent 100px), linear-gradient(to bottom, green, yellow, blue);
}

<div class="test"></div>

Hide result

Answer 3

There is a way to make the border image gradient, which can be seen here:

https://css-tricks.com/examples/GradientBorder/

From my testing, this will not work with height 0. You are pretty limited to using pseudo-classes to achieve this, I don't think you can use gradient + trapedzoid tracing strictly with borders on divs with height 0.