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

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

0 голосов
/ 01 сентября 2018

Я борюсь со свойством 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>

1 Ответ

0 голосов
/ 01 сентября 2018

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

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

Вот еще одна идея с косым преобразованием и псевдоэлементами: 

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

А вот решение clip-path: 

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