如何使 CSS 剪辑路径仅驻留在 div 之上？

debugcn 发表于 Dev

努里曼西亚·里夫万

我只是想问我们如何创建仅位于 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>

如果我clip-path在我的#rectanglediv 中使用 css ，那么它将裁剪（屏蔽）整个 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 Achievement

你们能帮忙做些什么才能说清楚吗？谢谢你的回答。

东方血脉

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。