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?
CodePudding user response:
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 ></div>