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

Question

[Dymok]

Есть вот такой блок

У него по бокам два выреза. Нужно сделать так, чтобы размеры этих вырезов всегда были одинаковыми, вне зависимости от ширины и высоты блока.
Пробую использовать clip-path, но адаптивности при этом не получается. Если изменяется высота блока, то изменяется и высота выреза.

Comments

[Антон Литвиненко]

А если задать их в пикселях а не процентах?

[GAS-ART]

Самый простой путь это наверное сделать принт скрин и вставить картинку (фоном через backgraund или картинкой и тогода на нее воздействовать через object-fit). Ну а там уже попробовать поигратся со свойствами cover, fill, contain...

А вообще нужно что б эти вырезы всегда были по центру экрана или всегда по центру блока?

[Dymok]

Антон Литвиненко, их это кого?

[Dymok]

Артем, по центру блока

[Ankhena]

Градиентами. Зададите в px, так и останется.

[Dymok]

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

[DENIS Kokorev]

Если необходимо сохранить все пропорции тут, видимо, только один выход. Как в старину делали для скругления элементов. Нарезать таблицей куски clip path и натянуть поверх таблицей. Как то так. Средние горизонтальные и вертикальные куски делаются резиновыми. Содержащие знаковые элементы (уголки и стрелки по центру) фиксированного размера. Не?

[Ankhena]

DENIS Kokorev,

и натянуть поверх таблицей

Мамочки..

В ваших браузерах не работают border-radius и background-image?

Answer 1

[Ankhena]

Дорабатывайте под свои нужды.
В том числе можно сделать запас наложения псевдо и градиентов на 1px через тот же calc.

Comments

[DENIS Kokorev]

Ankhena, ваш пример хорош. Но центральные стрелки искажаются при изменении ширины блоков.

А у Dymok написано:

...вне зависимости от ширины и высоты блока.

[Ankhena]

DENIS Kokorev, отлично, можете доработать и для ширины.
У меня не было в планах выполнять всю работу за спрашивающего. В ответе я указала, что требует доработки.

[Dymok]

Спасибо, это то, что нужно