CSS，将内圈剪裁成图像

Question

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

I want to achive this ->

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

.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

I want to achive this ->

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": This value indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

MDN 引用

CSS，将内圈剪裁成图像

CSS, Clip inner circle to image

html

javascript

css

svg

banner