如何使CSS剪辑路径只位于div的顶部

Question

我只想问我们如何创建一个仅位于div顶部的剪辑路径。例如，我有一个矩形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>

如果我对#rectanglediv使用cssclip-path，那么它将剪裁(屏蔽(整个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>

所以，我想要实现的是这样的：剪辑路径实现

你们能帮忙做些什么让事情变得清楚吗？谢谢你的回答。

Answer 1

有一个非常简单的解决方案。剪辑路径中的底部点的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>

Answer 2

如果找不到其他解决方案，它可能会起作用。

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>