Как реализовать header с сдвоенным фоном?

Question

[Евгений Ширяев]

Всем привет, как реализовать такой вариант главной страницы и чтобы при наведении на блоки (зима-лето), затемнялся фон.

Answer 1

[WapSter]

https://bennettfeely.com/clippy/ и почитать о свойстве clip-path

Comments

[gh0sty]

Оу чел, не знал о clip-path, пасибки)) Думал все через ::before ::after до сих пор делают))) Но я так понимаю, это новое свойство - не все поддерживают.

[Евгений Ширяев]

Спасибо, собственно так и предполагал, но думал есть ещё варианты.

[WapSter]

Евгений Ширяев, да есть еще, pos:a + transform более кроссбраузерно.

[WapSter]

gh0sty, делают по старинке как описал выше не особо сложно. У меня на работе просто разрешены, все поддерживаемые свойства chrome, а он вечно зеленый.

[gh0sty]

WapSter, + хотел написать, но уж слишком по мне геморно это все реализовывать. Ну сам подумай, гадать с градусами, еще эта полоса, и адаптивненько чтоб)) Ну а затемнение - через css сочетание селекторов - если в них не шаришь - js.

И у меня первый url не открывает.

P.S. Хотя да, через before after - еще жестче, просто к ним привык))

[WapSter]

gh0sty, https://codepen.io/yoksel/full/fsdbu/ это свойство можно применять с svg, тогда более кроссбраузерно.

Answer 2

[Антон Шаманов]

svg