CODEWITHSUNDEEP
cssclip-path
CJT3
CJT3

Reputation: 2908

How do I cut out an ellipse from an ellipse using clip-path in CSS?

I've been trying to figure out how to use clip-path to cut a circle out of a div. I created a demo that kinda works in reverse, but it doesn't do exactly what I want: http://jsfiddle.net/5eedebkn/2/

I haven't been able to figure out how to get clip-path to "inset" the cut out area when using ellipses.

body    {
    background: rgb(0,0,0);
}

.claw    {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 300px;
    background: rgb(255,255,255);
    border-radius: 50%;
    -webkit-clip-path: circle(90% at -20% -20%);
    clip-path: circle(90% at -20% -20%);
    z-index: 5;
}
.circle    {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 300px;
    background: rgb(35,155,215);
    border-radius: 50%;
    -webkit-clip-path: url(#c1);
}
<div class="claw"></div><div class="circle"></div>

So the part that is whit should end up being clipped so that all you can see is the blue and black parts. I want the part that is cut out to be transparent, and it has to be rounded.

Upvotes: 1

Views: 2149

Answers (1)

Kevin Hufnagl
Kevin Hufnagl

Reputation: 386

Inverting the circle only works if you convert the circle to a path. Then in the d attribute you need to specify two paths. The first one being a rectangle that covers the entire circle:

400x400 px:

M0,0H400V400H-400z

The second path is the circle that will be cut out.

M-180,0a200,200 0 1,0 400,0a200,200 0 1,0 -400,0

This circle starts at x=20, y=0 and has a radius 200px. I used an online tool to convert it.

Put together you have this, and use it as a clip-path in your css:

<svg>
    <defs>
        <clipPath id="circle">
            <path d="M0,0H400V400H-400zM-180,0a200,200 0 1,0 400,0a200,200 0 1,0 -400,0" />
        </clipPath>
    </defs>
</svg>

CSS:

clip-path:url(#circle);

http://jsfiddle.net/5eedebkn/6/

Upvotes: 3

Related Questions