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

Question

[Alli03]

Приветствую) Может кто подскажет как сверстать такой header ? А именно интересует буква "V" и её фон (фото внизу)? Как сделать букву полупрозрачной с оттенком?

Answer 1

[Ivan Bogachev]

Можно с помощью фильтров добиться такого (или очень близкого) результата - codepen. Но придется что-то решать с IE, ибо он в фильтры не умеет

Answer 2

[Nikita Shchypylov]

В свое время я не парился и вырезал её фоном. Лучше подумай как сделать навигацию слева

Comments

[Alli03]

Спасибо) А вы бы как сделали?

[Nikita Shchypylov]

Я ее сделал с помощью https://github.com/peachananr/onepage-scroll. Но там нужен большооой бубен

[Nikita Shchypylov]

Alli03: И умение с ним танцевать

Answer 3

[Андрей Верх]

Не уверен что точно сработает, но попробуйте использовать CSS фильтры. Вроде contrast, brightness и т.д.

.v {
color:red;
opacity:0.6;
filter: contrast(6);
}

Answer 4

[ByRon]

это скорее всего через SVG mask + CSS filter