Как реализовать поворот background?

Question

[Kusmich]

Сделал ромбы (просто повернул квадраты), нужно вставить в каждый ромб картинку, проблема в том, что она перевернута получается.

Как обратно повернуть картинку?

И как сделать, чтобы при ховере ромб наполовину закрашивался?

Вот мой код: https://jsfiddle.net/Valeriy1996/5mjz4rf0/2/

Answer 1

[Алексей Зуев]

Конечно очень ужасный код. И почему у вас для разных браузеров разные углы поворота. Так задумано?
Взял поворот для webkit. Вот ваши ромбы

Answer 2

[Pavel Torbeev]

Делаете внутри дополнительный div, в котором переворачиваете в обратную сторону, а нешнему присваиваете overflow:hidden. Закрашивание так же можно реализовать дополнительным дивом, который будет "выезжать" на половину

Answer 3

[kapuletti]

Пример очень большой и долго в нем разбираться.

Смысл такой: сделать обертку. Поворачиваем обертку на +45 градусов, а содержимое на -45.

Answer 4

[Алекс К]

Сделайте блок с ромбами с помощью SVG. CSSом ставите фоновую картинку на ромбы. Поверх каждого ромба в SVG еще половинка ромба, которая прозрачна по умолчанию, и непрозрачна по ховеру.