How can I make this shape with background gradients?

Question

I want to create this shape with only background. Or may clip-path & pseudo-element.

I tried so far with ::before

div {
  height: 300px;
  width: 400px;
  background: tomato;
  border-radius: 0 0 5px 0;
  position: relative;
}
div::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: inherit;
  height: 400px;
  background: red;
  bottom: -395px;
  border-radius: 0 0 400px 0;
}

.abs {
  width: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

body {
  margin: 0;
}

<div></div>

<img src="https://i.hizliresim.com/LvZGL1.png" alt="" class="abs"> <!-- intended shape -->

Answer 1

You can consider skew transformation combined with some overflow and radius:

.box {
  width: 200px;
  height: 280px;
  position: relative;
  overflow:hidden;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 100px 50px;
  background: linear-gradient(26deg,red,blue);
  transform: skewY(-26deg);
  transform-origin: left;
}

<div class="box">

</div>