Как сверстать данный элемент?

Question

[egowka]

Есть такой первый экран, вокруг него в нижней части есть тень


Как можно реализовать данный кружок, чтобы вокруг него по картинке было прозрачное пространство с тенью, причём сделать это адаптивно? Спасибо большое за ваши ответы!

Comments

[Froggyweb]

border c нужным цветом

[Ankhena]

1. Как можно реализовать такую фигуру?
2. Как сверстать такой блок?
3. https://jsfiddle.net/Ankhena/6j4omned/

Answer 1

[Николай Угольников]

Кружку задай обводку border: 20px solid rgba(0,0,0,0.3), а блоку задай нужную тень

Comments

[egowka]

Смотрится как-то так. Сильно бросается в глаза(

[Николай Угольников]

egowka, можешь загрузить код на codepen?