Как такое сверстать?

Question

[jertik]

Как такое сверстать? Т.е. нужно сделать треугольный вырез над картинкой...


Update
Смотрю меня не совсем поняли.

Создайте страницу с фоновый изображением, в ней белый блок, и вырежьте в этом блоке вот такой треугольник.
P.S. Более того этот треугольник должен быть в аккурат под требуемым пунктом меню!

Всем спасибо, кто откликнется!

Update
https://jsfiddle.net/p5ffyLb8/

Comments

[Алекс Глебов]

отправьте дизайнеру на доработку просто

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/ZXBMyL?editors=1100

Comments

[jertik]

Размер треугольника изменяется взаимозависимости от ширины элемента. Не знаю как фиксить...(

[Андрей Федоров]

Перейти от процентов к фиксированным значениям. Обновил решение - так размер будет зависеть от размера шрифта. Если хотите совсем фиксированный размер замените em на px в градиенте у li.

Answer 2

[ой всё]

самое простое - png с прозрачностью
еще есть svg

Comments

[Astrohas]

вижу Вы обожаете флудить

Answer 3

[Олег]

пункт_меню {
    position: relative;
}
пункт_меню:before {
    content: '';
    position: absolute;
    left: 45%;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom: 6px solid #000;
}

Comments

[jertik]

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

[jertik]

https://jsfiddle.net/p5ffyLb8/

[Олег]

jertik, треугольник должен быть однотонным или как?

[Олег]

jertik, добавить правильные стили и все будет, ок)))

span {
    margin-right: 20px;
    position: relative;
    padding: 21px 0;
}
span:before {
    content: '';
    position: absolute;
    left: 31%;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom: 6px solid #000;
}

[jertik]

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

[Олег]

jertik, добавляем 2 черырехугольника, как это сделать написано, например, тут: https://habrahabr.ru/post/126207/

Answer 4

[Aligatro]

https://jsfiddle.net/t7hahc3n/

Comments

[jertik]

Спасибо, но все ломается при изменении ширины "элемента меню"

[Aligatro]

jertik, идеально выровнять вырез со строкой любой длины вряд ли получится, но вот чуть исправленный вариант - https://jsfiddle.net/t7hahc3n/

[Евгений Калибров]

Всё ломается если шрифт элемента другой будет - https://jsfiddle.net/t7hahc3n/2/