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

#html #css

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




    

Ответы

Ответ 1

Поворот линий:


Располагаем линии абсолютно, чтобы и 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


Ответ 2

Делаем: 

.prev {
 display: inline-block; /* Здесь и происходит магия */
 transform: rotate(90deg);
}