使用CSS中的剪辑路径为元素中心创建半圆形切割效果

Question

如何在CSS中使用clip-path来剪切元素，使得剪切发生在元素的中心，并且剪切遵循半圆形形状？

我想创建一个设计，其中有一个元素，比如说

<div>

，我想以这样的方式切割它，使切割发生在元素的中心。此外，我希望切口类似于半圆形。我研究过将

clip-path

与 SVG 路径一起用于自定义形状，但我无法确定实现此特定效果所需的确切路径或坐标。

有人可以提供如何使用

clip-path

和 SVG 创建这种剪切效果的指导或示例吗？

我想用clip-path制作这个效果

我使用了多边形/圆/日食，但它对我没有帮助

Answer 1

通常，当涉及到剪辑路径时，如果剪辑的元素（图像）是 SVG 的一部分，则处理起来会更容易。在这里，我还添加了红点/链接。

.arrow {
  transform: rotate(-45deg);
  transition: all .4s;
}

.arrow:hover {
  transform: rotate(0deg);
}

section {
  background-color: #333;
}

.something {
  height: 6em;
}

<section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 550">
  <defs>
    <clipPath id="cp1">
      <path d="M 0 0 h 1200 v 500 H 690 C 664 500 660 434 600 434 C 540 434 536 500 510 500 H 0 Z" />
    </clipPath>
  </defs>
  <image href="https://placehold.co/1200x500/png" width="1200" height="500" clip-path="url(#cp1)" />
  <a href="#" transform="translate(600 500)">
    <g class="arrow">
      <circle cx="0" cy="0" r="50" fill="red" />
      <g transform="translate(0 25)" stroke="white" stroke-width="10" stroke-linecap="round">
        <line y1="-50" />
        <line y1="-30" transform="rotate(50)" />
        <line y1="-30" transform="rotate(-50)" />
      </g>
    </g>
  </a>
</svg>
  <div class="something"></div>
</section>