Как установить пользовательский фон с помощью свойства CSS clip-path?

Question

Я борюсь с clip-path свойство для создания абстрактного фона, и я не хочу использовать файл изображения или SVG, я пытался с этим свойством, но я не могу достичь этого результата: введите описание изображения здесь

мой основной код:

.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

Вы можете обратиться к этому полезному веб-сайту, который позволяет создавать сложные формы и комбинировать их для создания фона.

.bg{
 height: 100vh;
    margin: 0;
}
.shape-1{
    -webkit-clip-path: polygon(0 0, 0 45%, 100% 0);
    clip-path: polygon(0 0, 0 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%, 100% 21%, 100% 100%, 0% 100%);
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 2

Незачем clip-path для этого вы можете добиться этого более поддерживаемым способом, учитывая фон и градиент, и только один элемент. Это также будет отзывчивым:

body {
 margin:0;
 height:100vh;
 background:
  linear-gradient(to top left,transparent 49.8%, #3e19c6 50%) top/100% 30%,
  linear-gradient(to bottom right,transparent 49.8%, #c61951 50%) 0 30%/100% 30%,
  linear-gradient(#c61951,#c61951) bottom/100% 49.5%;
  
 background-repeat:no-repeat;
}