Как убрать часть верхней границы блока?

Question

[AntonSork]

Как добиться такого эффекта, как на изображении? Учитывая тот факт, что соотношение сторон может меняться, а "разрыв" должен находиться на уровне шлема и равняться его ширине

Answer 1

[Кирилл]

Я бы сделал как-то так: codepen.io/Kublyakov/pen/eJjQZb
Делал на примере вашей картинке, думаю нужные размеры и цвета подберете =)

Answer 2

[Алексей A]

Есть такая штука как CSS маски вот, например.

Ещё можно использовать градиент. Как-то так, codepen.io

Answer 3

[Kovalsky]

А обязательно нужно чо-то обрезать/вырезать? Мне такое даже в голову не пришло

Вот без всяких разрывов и вычислений размеров башки этого мужика

Comments

[Алексей A]

Пф, так тут девушка (если её так можно назвать) это один рисунок, а фон - другой. И там всё сделано как раз из z-inxex.

[Kovalsky]

Ну да, а надо было как-то по-другому?

В любом случае, я подумал что верстка статичной рамки с хардкодным разрывом ценности не имеет, и решил что легче сделать оверлэп, что к тому же красивее

[Алексей A]

Никита Полевой: Тогда ещё проще просто в фотошопе её нарисовать (собственно, что и делают) и не морочить себе ... В общем, кто как любит.

[Kovalsky]

Алексей A: ну, как раз тот эффект который у меня в примере, в фотошопе не сделаешь

Answer 4

[Dvorak]

Фон - одна картинка, человек - другая. Определяем размер человека и размер шлема. На соответствующей ширине проводим линию, при этом у неё z-index меньше, чем z-index картинки человека

Можно ещё через canvas попробовать, но там сложнее