@Kusmich

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

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

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

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

Вот мой код: https://jsfiddle.net/Valeriy1996/5mjz4rf0/2/
  • Вопрос задан
  • 9196 просмотров
Решения вопроса 2
Конечно очень ужасный код. И почему у вас для разных браузеров разные углы поворота. Так задумано?
Взял поворот для webkit. Вот ваши ромбы
Ответ написан
Комментировать
Делаете внутри дополнительный div, в котором переворачиваете в обратную сторону, а нешнему присваиваете overflow:hidden. Закрашивание так же можно реализовать дополнительным дивом, который будет "выезжать" на половину
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
kapuletti
@kapuletti
Пример очень большой и долго в нем разбираться.

Смысл такой: сделать обертку. Поворачиваем обертку на +45 градусов, а содержимое на -45.
Ответ написан
Комментировать
alexk111
@alexk111
Автор Ботодрома (автоматизация Telegram, VK и др.)
Сделайте блок с ромбами с помощью SVG. CSSом ставите фоновую картинку на ромбы. Поверх каждого ромба в SVG еще половинка ромба, которая прозрачна по умолчанию, и непрозрачна по ховеру.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы