Я хочу создать фигуру, которую я бы описал как «круг наоборот»:
Изображение сделано как-то неаккуратно, потому что черная линия должна продолжаться вдоль внешней границы элемента div.
Вот демонстрация того, что у меня есть на данный момент:
div {
border: 1px solid black;
background: grey;
}
#a {
position: absolute;
left: 0px;
width: 100px;
height: 100px;
border-radius: 50px;
}
#b {
position: absolute;
left: 110px;
width: 200px;
height: 100px;
border-radius: 20px;
}
<div id="a"></div>
<div id="b"></div>
Возможно ли это с помощью CSS без изображений?
Свободный перевод вопроса CSS 3 Shape: “Inverse Circle” or “Cut Out Circle” от участника @Alp.