Как реализовать такой ховер эффект?

Question

[Alice777]

Есть блок с картинками (абсолютно спозиционированными треугольниками), необходим такой ховер эффект.
При адаптации блоков ховер не должен ломаться

Comments

[Максим Тимофеев]

И что? Сделать за Вас? Вопрос в чем?

[Froggyweb]

А где верстка блока?

Answer 1

[Danila]

https://codepen.io/DNLHC/pen/aWejyE?editors=1100
вместо псевдоэлементов картинки

Answer 2

[Negwereth]

Это всегда квадрат? Если нет, то как позиционируются элементы?
А вообще transform вам в руки.

Comments

[Alice777]

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

[Negwereth]

Alice777: потому и спрашиваю — всегда ли это квадрат.

Answer 3

[Александр Лысенко]

По аналогии сделайте

Comments

[Alice777]

благодарю, но бордеры не подходят. Нужно изображение(картинка)

[Александр Лысенко]

Alice777: Я вам показал пример как. Вы же не прикрепили ни верстку, ни картинку. Не мне же их резать. Взял бордеры потому как сверстать в две строчки.