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?

You maybe can make this preferable an svg so you can scale it properly and more easily. Else you may be able to pull this off with just css. Make a container with position relative and padding bottom trick so you can scale it with window width and then add shapes with gradients. You may have to add some white shapes on top of the gradient shapes. Good luck! — Medda86
– Medda86, Commented May 7, 2022 at 21:34
This might be able to be done with CSS clip-path to make some gradient shapes. — boostedd
– boostedd, Commented May 7, 2022 at 21:41

Temani Afif · Accepted Answer · 2022-05-07 21:43:20Z

4

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>

answered May 7, 2022 at 21:43

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

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

Collectives™ on Stack Overflow

Is it possible to do this shape CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related