Как вырезать круглую область из блока?

Question

[Cheizer]

Друзья, подскажите решение, идею, как вырезать круглую область из html блока. Что бы было вот так


Внимание, фон под блоком не должен перекрываться! В этом проблема, вырезать круг нужно полностью, а не заклеить псевдоэлементом.

В итоге это нужно для кнопки что бы закрыть блок. Но с этим проблем нет.


Вот макет живой https://codepen.io/Cheizer/pen/gOOeEqz

Comments

[RAX7]

Как адаптивно сверстать блок с вырезом-полукругом? SVG-маска?

[Cheizer]

RAX7, Благодарю!

[Alams Stoyne]

border-radius: 50%;
не сгодиться?

[Cheizer]

Alams Stoyne, а как бордер вырежет круглую область?

[Cheizer]

RAX7, единственно непонятно как размер круга изменить :(

[RAX7]

Роман Кузнецов,

background-image: radial-gradient(circle at 100% 50px, transparent 30px, #fff 31px);

30px - это радиус окружности

[Cheizer]

RAX7, ок, разобрался, менял, он делал размытие, нужно было и #fff 31px тоже менять. Напишите отдельно комментарий, отмечу решением. Вы как ответ на мой пост написали, так нельзя отметить решением.

[RAX7]

Роман Кузнецов, это вопрос наверное лучше объединить с тем, что я написал в комментах выше, чтобы не плодить одни и те же вопросы.

[Cheizer]

RAX7, тут так не сделать. Это привелегия админов. Я лишь могу отметить решением тот или иной ответ, НО самостоятельный комментарий, а не ответ на мой пост. Поэтому ваш ответ не могу отметить, тут нет такой функции. Просто скопируйте текст как комментарий НИЖЕ. Отмечу решением.

[RAX7]

Роман Кузнецов, ладно, уговорил =)

[Cheizer]

RAX7, :))

Answer 1

[RAX7]

Как адаптивно сверстать блок с вырезом-полукругом? SVG-маска?