Как сверстать блок с частью скрытого изображения?

Question

[barsecky]

Добрый вечер.
Подскажите как сверстать блок?



Дело в том что на том месте где сейчас в макете изображение - будет видео.
Не могу понять как сделать блок который скрывает часть изображения.
Если делать псевдоэлементами - то нет возможность подобрать цвет блока, тк фон градиентом.

Так же не совсем понятно как сделать сетку поверхблока с данным изображением

накидал код codepen
Уже пару часов голову ломаю и не могу понять как это сделать.
Буду рад любой помощи

Comments

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

[barsecky]

Антон Литвиненко, не совсем понимаю ваше решение моей задачи((

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

barsecky,
сначала идет блок на всю ширину, часть которого занимает видео
дальше идет блок с неким враппером, который ограничивает ширину контента.
внутри враппера идет блок шириной около 55%, с серым бекграундом, который накрывает кусок видео,потому что вся секция смещена вверх например отрицательным маргином или позиуионированием - как удобно.
единственной проблемой вижу градиент на сером фоне, если серое это целиком градиент то может не выйти

[barsecky]

Антон Литвиненко, так в градиенте вся проблема((( если бы фон был бы просто однотонным - не было бы и проблемы((((

Answer 1

[Иван]

Не пробовал с видео, но с картинками точно работает .

Допустим так

clip-path: polygon(53% 0, 100% 0, 100% 49%, 100% 100%, 53% 100%, 52% 49%, 0 49%, 0 0);

потыкать тут

Comments

[imko]

А сеточку?)

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

— Простите, это не вы вчера нашего мальчика из проруби вытащили?
— Да, а что?
— А шапочка, простите, где?

[barsecky]

Иван спасибо, ваше решение помогло, осталось придумать как сетку создать((

[Иван]

barsecky,

Можно попробовать еще один слой , где на bg градиент

.background--gradient::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: linear-gradient(to right, gray 1px, transparent 1px), linear-gradient(to bottom, gray 1px, transparent 1px);
  background-size: 5% 5%; 
}

Либо как-то совместить

[Иван]

barsecky, Вот дополнительный пример