How to set a custom shaped background using CSS clip-path property? - html

Question

i'm struggling with clip-path property in order to create an abstract background and i don't want to use an image or svg file, i tried with that property but i can't achieve this result :
enter image description here
my basic code:
.bg{
height: 100vh;
margin: 0;
}
.shape-1{
-webkit-clip-path: polygon(0 0, 10% 45%, 100% 0);
clip-path: polygon(0 10%, 40% 36%, 100% 0);
background: #3e19c6;
height: 100%;
width: 100%;
position: absolute;
margin: 0;
z-index: -1;
}
.shape-2{
-webkit-clip-path: polygon(0 62%, 100% 21%, 100% 100%, 0% 100%);
clip-path: polygon(0 62%, 90% 21%, 100% 100%, 0% 85%);
background: #c61951;
height: 100%;
width: 100%;
position: absolute;
margin: 0;
z-index: -1;
}
<div class="bg">
<div class="shape-1"> </div>
<div class="shape-2"> </div>
</div>

Answer 1

You can achieve this considering multiple background and gradient and only one element. It will also be responsive:
body {
margin:0;
height:100vh;
background:
linear-gradient(to top left,transparent 49.5%, #3e19c6 50%) top/100% 30%,
linear-gradient(to bottom right,transparent 49.5%, #c61951 50%) 0 30%/100% 30%,
linear-gradient(#c61951,#c61951) bottom/100% 49.1%;
background-repeat:no-repeat;
}
Here is another idea with skew transformation and pseudo elements:
body {
margin:0;
height:100vh;
position:relative;
overflow:hidden;
}
body::before,
body::after {
content:"";
position:absolute;
left:0;
width:100%;
transform-origin:right;
transform:skewY(-8deg);
}
body::before {
bottom:100%;
height:100vh;
background:#3e19c6;
}
body::after {
bottom:0;
height:80%;
background:#c61951;
}
And here is the clip-path solution:
body {
margin:0;
height:100vh;
position:relative;
overflow:hidden;
}
body::before,
body::after {
content:"";
position:absolute;
left:0;
width:100%;
}
body::before {
top:0;
height:25%;
background:#3e19c6;
-webkit-clip-path:polygon(0 0,100% 0,0 100%);
clip-path:polygon(0 0,100% 0,0 100%);
}
body::after {
bottom:0;
height:75%;
background:#c61951;
-webkit-clip-path:polygon(0% 33.33%,100% 0,100% 100%,0 100%);
clip-path:polygon(0% 33.33%,100% 0,100% 100%,0 100%);
}