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

Admin 1
Viewed 1933

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>

clip-path css html
1 Answers

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%);
}

user_86203330
Related