Actually I can not understand how to turn it so that it was up? I changed the transform, but I can not understand how it works. I achieved the desired result when I specified more than 100% in transform-origin, but this, as I understand it, is not quite the right decision.

.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); } 
 <div class="prev"></div>

    2 answers 2

    Rotate lines:

    1. We arrange the lines absolutely so that both before and after straightened out on each other;
    2. Based on the height of the blocks at 8px , we assume that the lines are 4px and they start not with 0 0 , but with 4px 4px . Adjust transform-origin ;
    3. Shift both lines closer to the middle of the block, and rotate - one at 45 degrees (right), the other at 135 degrees (left).

    Code:

     .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); } 
     <div class="prev"></div>

    Or look at the code on jsfiddle

    • Thank you, figured out. - Alexander

    We do:

     .prev { display: inline-block; /* Здесь и происходит магия */ transform: rotate(90deg); }
    • Yes, you can do this, but I wonder not how to turn the parent, but how to put the lines themselves properly. thanks for the response anyway - Alexander