CSS，将内圈剪辑到图像

Question

我正在尝试在底部圆角的图像上使用"剪辑路径"。我尝试使用 svg 剪辑路径，但剪切它是一个外圈，我不知道是否是最好的方法，因为剪辑是外部而不是内部的，您建议实现这一点吗？

我想实现这个 ->

这是我尝试制作的代码笔：

.section-test {
  padding: 25px 0;
  background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png);
  background-size: cover;
  height: 85vh;
  clip-path: ellipse(85% 100% at 50% 0%);
}

<section class="section-test">
</section>

https://codepen.io/kenmarquez-the-typescripter/pen/ombege

我想实现这个 ->

Answer 1

这就是我的做法：我会使用 SVG 元素。clipPath 具有 clipPathUnits="objectBoundingBox" 个，路径具有介于 0 和 1 之间的所有值。

svg{position:absolute}
.section-test {
  padding: 25px 0;
  background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png);
  background-size: cover;
  height: 85vh;
  clip-path: url(#clip); 
  }

<svg height="0" width="0" >
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0 L0,.5 A1,1 0 0  1 1,.5 L1,0 0,0" />
        </clipPath>
    </defs>
</svg>
 
<section class="section-test">
</section>

我希望它有所帮助。

clipPathUnits="objectBoundingBox"：此值指示元素内的所有坐标都相对于应用剪切路径的元素的边界框。这意味着坐标系的原点是对象边界框的左上角，并且对象边界框的宽度和高度被视为具有 1 个单位值的长度。

MDN报价