Страницы

Поиск по вопросам

вторник, 28 мая 2019 г.

Как повернуть стрелку?

Собственно не могу понять, как её повернуть так, чтобы она была вверх? Менял transform, но не могу понять, как он работает. Добивался нужного результата когда указывал больше 100% в transform-origin, но это, как я понимаю, не совсем правильное решение.
.prev { position: relative; } .prev:before, .prev:after { content: ''; display: block; height: 8px; width: 32px; background: #4a275c; border-radius: 5px; } .prev:before { transform-origin: 50% 100%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .prev:after { transform-origin: 0% 100%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }



Ответ

Поворот линий:
Располагаем линии абсолютно, чтобы и before, и after распогались друг на друге; Исходя из высоты блоков в 8px предполагаем, что линии у нас - толщиной в 4px и начинаются они не с 0 0, а с 4px 4px. Корректируем transform-origin Смещаем обе линии ближе к середине блока, и поворачиваем - одну на 45 градусов (правую), другую на 135 градусов (левую).
Код:
.prev { display: inline-block; height: 26px; position: relative; width: 44px; } .prev:before, .prev:after { background: #4a275c; border-radius: 5px; content: ''; display: block; height: 8px; position: absolute; transform-origin: 4px 4px; width: 32px; } .prev:before { transform: translate(18px, 0) rotate(45deg); } .prev:after { transform: translate(18px, 0) rotate(135deg); }


Или посмотреть код на jsfiddle

Комментариев нет:

Отправить комментарий