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

Question

[Михаил]

Все добрый день. Интересует вопрос, как сделать такой Header , у которого такая стрелочка треугольная внизу.
Чтобы фоновый рисунок попадал в этот треугольник .. Там будет даже не картинка, а видео, поэтому вариант сделать картинку с вырезом не подходит

Answer 1

[RAX7]

можно и без before/after

Answer 2

[hzzzzl]

before / after

https://codepen.io/anon/pen/XGMdxz

Comments

[hzzzzl]

а, хотя там картинка же на фоне..
предлагаю просто сделать фоновую картинку с таким вырезом и прозрачным бекграунТом :D

[Михаил]

а фоновый рисунок ? фотография на фоне , чтобы она в этот треугольник попадала .. как ?

[Михаил]

Вообще там предполагается видео на фоне, поэтому не получится сделать такую картинку с вырезом..

[hzzzzl]

я совершил извращение!
https://codepen.io/anon/pen/RdpRZP

на определенной ширине перестает работать, но думаю можно допилить уже

[Михаил]

hzzzzl, и оно интересное :)

[hzzzzl]

ща придет папка цсс и всё напишет как надо двумя строчками :D

Answer 3

[Andrej Sharapov]

сделайте через clip-path. Это самое легкое и не нужны будут всякие псевдоклассы. Для поддержки продублируйте с -webkit-clip-path