htmlcsssvgclip-path

Creating a Semi-Circle Cut Effect using clip-path in CSS for Center of Element

How can I use clip-path in CSS to cut an element in a way that the cutting occurs at the center of the element, and the cut follows a semi-circle shape?

I want to create a design where I have an element, let's say a <div>, and I'd like to cut it in such a way that the cut happens right at the center of the element. Additionally, I want the cut to resemble a semi-circle. I've looked into using clip-path with SVG paths for custom shapes, but I'm having trouble figuring out the exact path or coordinates needed to achieve this specific effect.

Could someone please provide guidance or an example of how to create this kind of clipping effect using clip-path and SVG?

I want to make this effect with clip-path

I want to make this effect with clip-path

I used polygon an circle/eclipse but it didn't helped me

Solution

  • Often, when it comes to clip paths it is easier to handle if the clipped element (there the image) is part of the SVG. Here, I also include the red dot/link.

    .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>