Собственно не могу понять, как её повернуть так, чтобы она была вверх?
Менял 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
Комментариев нет:
Отправить комментарий