Фигура CSS 3: «Обратный круг» или «Вырезанный круг»

Question

Я хочу создать фигуру, которую я бы описал как «круг наоборот»:

Изображение сделано как-то неаккуратно, потому что черная линия должна продолжаться вдоль внешней границы элемента 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.}

Answer 1

В этом подходе используются тени блоков CSS, которые поддерживаются IE9 + (canIuse).

DEMO

Результат:

body{
    background: url(https://i.stack.imgur.com/raSfW.jpg) no-repeat;
    background-size:cover;
}
#a{
    overflow:hidden;
    border-radius:20px;
    position:relative;
    display:inline-block;
}
#a:before, #a:after{
    content:'';
    width: 100px;
    border-radius: 50%;
}
#a:before {
    height: 100px;
    float:left;    
    border: 1px solid black;
    background: grey;
}
#a:after {
    position:absolute;
    left:14px; top:-6px;
    height:114px;
    box-shadow: 1px 0px 0px 0px #000, 110px 0px 0px 68px #808080;
    background:none;
    z-index:-1;
}
#b {
    width: 200px;
    height: 100px;
    background:none;
    margin-left:-15px;
    border: 1px solid black;
    border-left:none;
    float:left;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

<div id="a">
    <div id="b"></div>
</div>

_{Свободный перевод ответа от участника @web-tiki.}

Answer 2

Немного страдает чёткость обводки, но если не ломать разметку, то можно реализовать следующим способом:

body {
  background: url(https://i.stack.imgur.com/raSfW.jpg) no-repeat;
  background-size: cover;
}

#a {
  position: absolute;
  left: 10px; z-index: 1;
  height: 100px; width: 100px;
  border-radius: 50%;
  background-color: grey;
}

#b {
  position: absolute;
  left: 60px;
  height: 100px; width: 200px;
  border-radius: 20px;
  background-image: radial-gradient( circle farthest-side at 5px 50px, #0000 59px, grey 60px);
}

#a, #b {
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000);
}

<div id="a"></div>
<div id="b"></div>

БЛОГ НА HUSL

Фигура CSS 3: «Обратный круг» или «Вырезанный круг»

Ответы (2 шт):