Как сделать треугольные блоки с изображениями?

Question

[Кирилл]

Как реализовать такие треугольники?
При наведении они должны пропадать и на их месте появляется лого.
Но суть не в этом, эти треугольники сделаны bacground'ом в div. Но каждый следующий div частично закрывает пердыдущий тем самым не давая hover случиться. Как решить подобную задачу? Долго думал.

spolier

Comments

[Сергей Соколов]

SVG?

[Кирилл]

Сергей Соколов, png

[Кирилл]

Сергей Соколов, Как сделать эту чертову задачу?

[lukoie]

Кирилл,
1 сверстать
2 нанять верстуна
3 попросить пример кода, и подстроить под себя

Answer 1

[Кирилл]

clip-path

Answer 2

[Pavel Karinin]

Посмотрите здесь и адаптируйте под свои задачи.

Comments

[Кирилл]

Ты мой джесус thanks

[Кирилл]

Могли бы вы еще объяснить, что и зачем нужно?

[Pavel Karinin]

Кирилл, Спрашивайте, отвечу. Что именно интересует?

[Кирилл]

Pavel Karinin, Я же ни разу не сталкивался с такими задачами, и адаптировать под мой вариант не очень получается, я понятия не имею как это работает)

[Кирилл]

Pavel Karinin, ширину контейнера задавать опираясь на что?

[Кирилл]

Pavel Karinin, crop

[Pavel Karinin]

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

[Максим]

Кирилл, конечно skew() вариант но он очень трудный , проще взять svg и он 100% резиновый и работает железобетонно

[Pavel Karinin]

Максим Ленский, Согласен.

[Кирилл]

Максим Ленский, Не подскажешь как с svg сделать?