Is it possible to do this shape CSS?

Question

I was asked with making such a background on a responsive site. I thought about preparing two divs using gradient, but it is highly problematic. Is it even possible to do it? Using this as a background-image is cumbersome for higher and lower resolutions.

Any ideas?

Answer 1

some clip-path and pseudo element can approximate this:

.box {
  width: 300px;
  aspect-ratio: .8;
  position: relative;
  z-index: 0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
}

.box:before {
  clip-path: polygon(0 0, 100% 50%, 10% 100%,0 100%);
  background: linear-gradient(40deg, #3185c5, #0ea1b1);
}

.box:after {
  clip-path: polygon(100% 30%, 100% 50%, 10% 100%,0% 100%, 0 80%);
  background: linear-gradient(40deg, #3185c5, #f55778);
}

<div class="box"></div>