Draw a circular gap in the box

Question

I want to use clip-path to cut a box with a circular cut. Using clip-path: polygon is a bit difficult to cut. Is there any way to cut a circular cut?

div{
    width: 200px;
    height: 300px;
    background-color: #00a3ee;
    clip-path: polygon(0 0,100% 0,100% 90%,90% 94%,0 200%);
}

<div></div>

Polygons *do not have curves* ....that is why you use a proper *path* — Paulie_D, Dec 08 '20 at 10:48

score 0 · Accepted Answer · answered Dec 08 '20 at 10:45

0

I would recommend using radial-gradient over clip-path Take a look:

div{
    width: 200px;
    height: 300px;
    background: radial-gradient(circle at bottom right, transparent 15%, #00a3ee 15.5%);
}

<div></div>

answered Dec 08 '20 at 10:45

John

5,132
1
6
17

Draw a circular gap in the box

1 Answers1