Как сделать 2 геометрические фигуры одна в одной?

Question

[Star Trooper]

Столкнулся вот с таким моментом. Мне необходимо сделать следующие геометрические фигуры.

То есть круг (белый), а внутри него "бублик" (бордовый), на серый фон не обращайте внимания, это сделано, чтобы показать, что за пределами "бублика" есть еще часть круга.
Вопрос:
Как по отдельности они делаются в css я знаю, подскажите, как их сделать вместе + с учетом того, что внутри еще будет текст и небольшой логотип.
Спасибо.

Answer 1

[Кирилл]

Я бы сделал как-то так: codepen.io/Kublyakov/pen/bEKXyE
border добавляется в :before с абсолютным позиционированием, тем самым размеры будут подстраиваться под размеры внешнего круга.
Если нужно, что бы текст внутри выделялся нормально, то для :before добавляется pointer-evens: none;
Ну отступы для текста думаю не нужно объяснять как добавлять)

Answer 2

[GreatRash]

Т.е. вложить два элемента друг в друга не катит? Тогда так:

.elem {
  width: 100px;
  height: 100px;
  
  border: 1px solid red;
  border-radius: 50%;
  box-shadow: 0 0 0 10px white;
  background-color: white;
}

Answer 3

[beaverBox]

Использовать фишку нескольких параметров у box-shadow.

box-shadow: 0 0 0 1px #faa, 0 0 0 10px #fff, 0 0 0 11px #ccc;

codepen.io/beaverBox/pen/RrBXGM