How to make skew not affect gradient css

user_6587023 0
Viewed 185

i'm trying to apply a gradient to a skewed div but the gradient starts where the skew starts and it doesn't apply the gradient i'm looking for no matter what angle i use.

This is the gradient i'm trying to replicate

enter image description here

but I get a very different result...the colors are off and it's too green on the right side of mine. You can notice that on the image above, the gradient starts at the little wedge at the bottom but mine starts on the entire bottom part.

    .main {
      height: 80vh;
      background-color: white;
    }
    
    .skew-div {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);;
      transform: skewY(-12deg);
      transform-origin: 0;
    }
    <div class="main">
      <div class="skew-div">
      </div>
    </div>

is this possible without just placing the image as a background?

gradient css html
3 Answers

Use clip-path

.main {
  height: 80vh;
  background-color: white;
  position:relative;
}

.skew-div {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
<div class="main">
  <div class="skew-div">
  </div>
</div>

user_86203330

You can use clip-path property

.main {
  height: 80vh;
  background-color: white;
}

.skew-div {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
  ;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}
<div class="main">
  <div class="skew-div">
  </div>
</div>

user_153359540

Instead of using transform: skewY() you may use clip-path property. transform sometimes creates some sudden confusing problems. That's why you should sometimes escape using that property. Else use it using proper Browser Vendor Prefixes.

If you feel any difficulty configuring clip-path property then you may use this 3rd party website for clip-path value generation => https://bennettfeely.com/clippy/

user_146021550
Related