Как сделать так, чтобы путь CSS-клипа находился только над div? - PullRequest
Новая
       33

Как сделать так, чтобы путь CSS-клипа находился только над div?

0 голосов
/ 11 декабря 2018

Я просто хочу спросить, как мы создаем путь клипа, который находится только поверх div.Например, у меня есть прямоугольный элемент типа вот так: 

body {
  margin: 0 auto;
}

#rectangle {
  width: 320px;
  height: 600px;
  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);
}
<div id="rectangle">
  This is the body.
</div>

И у меня есть такой элемент SVG: 

<svg width="321px" height="112px" viewBox="0 0 321 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <clipPath id="path">
    <path d="M0,54.6239019 C32.8368888,93.6621872 61.3541089,112.45422 85.5516602,111 C151.463201,111.161716 173.963962,18.2383058 321,0 C321.133852,37.3108666 321.133852,74.6442 321,112 L0,112 L0,54.6239019 Z" id="Rectangle" fill="#000000"></path>
  </clipPath>
</svg>

Если я использую css clip-path для моего #rectangle div, он будет отсекать (маскировать) весь div без игнорирования height.Как это: 

body {
  margin: 0 auto;
}
.rectangle {
  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);
  width: 320px;
  height: 600px;
  clip-path: url(#path);
}
<svg width="321px" height="112px" viewBox="0 0 321 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="path">
    <path d="M0,54.6239019 C32.8368888,93.6621872 61.3541089,112.45422 85.5516602,111 C151.463201,111.161716 173.963962,18.2383058 321,0 C321.133852,37.3108666 321.133852,74.6442 321,112 L0,112 L0,54.6239019 Z" id="Rectangle" fill="#000000"></path>
    </clipPath>
</svg>

<div class="rectangle">
  This is the body
</div>

Итак, чего я хочу достичь, так это: Достижение Clip Path

Можете ли вы, ребята, помочь, что должносделать чтобы было понятно?Спасибо за ответы.

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Существует очень простое решение.Нижние точки в вашем пути клипа имеют координату Y около 112. Все, что вам нужно сделать, это расширить путь клипа намного дальше вниз.Например, в следующем тесте я сделал эти координаты Y 10000. Теперь путь обрезки должен обрабатывать div любого размера (до 10000 пикселей в высоту). 

body {
  margin: 0 auto;
}
.rectangle {
  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);
  width: 320px;
  height: 600px;
  clip-path: url(#path);
}
<svg width="0" height="0">
<clipPath id="path">
    <path d="M 0,54.6239019
             C 32.8368888,93.6621872 61.3541089,112.45422 85.5516602,111
             C 151.463201,111.161716 173.963962,18.2383058 321,0
             L 321, 10000
             L 0, 10000
             Z" id="Rectangle" fill="#000000"></path>
    </clipPath>
</svg>

<div class="rectangle">
  This is the body
</div>
0 голосов
/ 11 декабря 2018

Если вы не можете найти другое решение, оно может сработать. 

body {
  margin: 0 auto;
  background:tomato;
}

.container {
  width: 320px;
  height: 600px;
  position:relative;
}

.rectangle {
  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);
  width: 320px;
  height: 600px;
  clip-path: url(#path);
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}

.linear {
  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);
  width: 320px;
  height: 488px;
  position:absolute;
  left:0;
  z-index:-2;
  bottom:0;
}
<svg width="321px" height="112px" viewBox="0 0 321 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="path">
    <path d="M0,54.6239019 C32.8368888,93.6621872 61.3541089,112.45422 85.5516602,111 C151.463201,111.161716 173.963962,18.2383058 321,0 C321.133852,37.3108666 321.133852,74.6442 321,112 L0,112 L0,54.6239019 Z" id="Rectangle" fill="#000000"></path>
    </clipPath>
</svg>
<div class="container">
<div class="rectangle">
</div>
<div class="linear">
</div>
</div>
...