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

Question

[Dymok]

Нужно сделать такой блок:

По сути, просто сбоку блока вырезать полукруг. Вроде бы, для этого подходит svg-маска, пытаюсь использовать, но оно не вырезает фигуру, а вырезает всё вокруг фигуры. Не то. Как можно решить эту задачу? Плюс, запихнув потом в блок текст, чтобы фигура не разваливалась от его большого количества

Comments

[Robert-critical-thoughts]

А не проще псевдоэлементом сделать этот фейковый вырез? Будет адаптивно, и ничем не хуже.
Position: relative; - для основного блока;
position: absolute - для элемента имитирующего вырез внутри(его можно сделать с помощью css\нарисовать как svg\png. И прибить его к правому краю.

[Dymok]

Robert-critical-thoughts, проблема в том, что в реальном макете есть фоновое изображение, поэтому это должен быть настоящий вырез

[Robert-critical-thoughts]

Dymok, Сделайте скрин макета(кусок вашего элемента), и покажите его. Что бы не гадать.

[Dymok]

Robert-critical-thoughts,

[RAX7]

Dymok, Как сделать прозрачный вырез?

Answer 1

[RAX7]

Comments

[NagelStart]

Подскажите пожалуйста. Как сделать из svg также как и в gif анимацию
Вот ссылка на gif - https://drive.google.com/file/d/12u-mylfIDQl_AOqko...

А вот и сам svg -
<?xml version="1.0" encoding="UTF-8"?>


viewBox="0 0 11.63 12.45"
xmlns:xlink="www.w3.org/1999/xlink"
xmlns:xodm="www.corel.com/coreldraw/odm/2003">

Answer 2

[Антон]

https://jsfiddle.net/ugvqhn9d/

Comments

[Dymok]

не то, увы, нужно именно вырезать

[Антон]

Dymok, https://jsfiddle.net/xudmr61c/

[itsjustmypage]

Антон, немного дополню. Чтобы сделать края градиента плавными, есть небольшой хак с вычитанием 1px на стоп-линиях. https://jsfiddle.net/e5bhzwcy/

[Антон]

itsjustmypage, а зачем?

[itsjustmypage]

Антон, так иначе края острые как бритва и пиксельные

Answer 3

[eugenedrvnk]

// google