Как соединить две фигуры (div) в одну?

Question

[distorting_reality]

1. Создал 2 div (контейнеры) в html-коде.
2. Прописал их свойства в css так, что первый div - это прямоугольник, а второй - круг. (Забыл название сайта, где можно прописать код и скинуть ссылку на этот код... Думаю, код вы представляете: width + height + border-radius)
Как эти две фигуры совместить в одну?

Чтобы получилось как на скрине.

Answer 1

[Lisonok]

codepen.io
Используйте position:absolute

Answer 2

[Olexandr Dmukhovskiy]

Здравствуйте
jsbin.com/lekitafu/7/edit вот код
jsbin.com/lekitafu/7 вот результат

Answer 3

[Владлен Грачев]

Как-то так: jsfiddle.net/NkmQk

Answer 4

[Sergiu Mitu]

примерно так (фигуры сами нарисуете, смысл главное уловить)