Search code examples
cssclip-path

Create a circular clippath that is always 300% height of the element ot clip and aligns left

Is a duplicate from this question, which was apparently too vague.

I want to clip elements using a clip-path in CSS, having specific requirements. I've been fiddling with it and reading MDN docs, but can't figure out how to do it, and if it can even be done.

The clip-path should be a perfect circle (so I was thinking about the circle function), of which the left side aligns with the left side of the element to clip. The circle should obtain its diameter by getting the height of the element to clip, and multiple that by 3 (so the circle should be 300% of the height of the element to clip).

Here is an example of what I'm trying to achieve:

enter image description here

Where the red bit is my content, the part of the element I want to keep/show. The element could have different widths and heights, the clip-path should adapt to that.

Clarification edit I don't know how large the element to clip is going to be. The whole point of this question is that the clip-path should adapt itself to whatever the element will be.

Solution

  • @Temani offered good idea, but farthest-side is not correct in this contest.

    Width of box is not important, let height 1, then radius should be 1.5. And center of the circle should be (1.5, 0.5).

    const boxElement = document.getElementById("box");
const height = parseFloat(boxElement.offsetHeight);
const radius = height * 1.5;
boxElement.style.clipPath = `circle(${radius}px at ${radius}px ${height / 2}px)`;
    #box {
  width: 200px;
  height: 100px;
  background: red;
}
    <div id="box"></div>