css剪辑路径部分圆圈[重复]

Question

我正在尝试在 css 中复制此剪辑，发现无法获得部分 cricles 和剪辑路径的多个实例。

基本上我想要弯曲的底部顶部边缘（忽略粉色框）。

我想像，

clip-path: circle(50%, 50%) 但不是剪辑路径在元素下方延伸得太远并且是一个大圆圈。

我想过可能是绝对的 :before 和 :after 元素，但这感觉很老套？

Answer 1

我不知道，如果您可以使用 css clip-path 属性执行此操作，但您可以使用 background-image 作为 svg 向量。制作带有圆边的 SVG，并使用该背景图像制作 fill 属性。

<svg width="502" height="162" viewBox="0 0 502 162" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M501.5 162V0.5C305.81 41.1562 196.035 41.1985 0.5 0.5V162C196.015 122.401 305.709 122.384 501.5 162Z" fill="url(yoururl.svg)"/>
</svg>

该 svg 看起来像这样：

       <svg id="svg" viewBox="0 0 502 162" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M501.5 162V0.5C305.81 41.1562 196.035 41.1985 0.5 0.5V162C196.015 122.401 305.709 122.384 501.5 162Z" fill="green"/>
    </svg>

您可以使用这个<svg>，将它复制到新文件，替换<path>元素上的url属性，将容器的样式更改为这个：

background: url(yourfile.svg);
background-size: cover;