#заметка дня и #codepen

Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.

К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.

Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.

Повернуть контейнер, сдвинуть его, чтобы совместить части. А вот внутреннюю часть контейнера — повернуть в обратном направлении и обратно же сдвигать на те же значения.

Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.

Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.

Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010

P. S. если вам нужны подобные совмещённые изображения — ищите по запросу macos dynamic wallpaper.

#css #geometry