Scale arrow made of 2 spans with margin and rotation - html

Question

I have an arrow that I want to scale with screen size, But I don't understand why negative margin doesn't scale properly for different screens is it because of the rotation? http://jsfiddle.net/1yab70ns/:
Edit: I realized it is because of the space from the inline-block and I fixed it wiht float, but why doesn't it also scale with screen?
.pointer span {
width: 1.7vh;
height: 4.5vh;
background: #41291B;
border-radius: 5vh;
display: inline-block;
position: relative;
}
.pointer span:nth-child(1) {
transform: rotate(45deg);
}
.pointer span:nth-child(2) {
transform: rotate(-45deg);
margin-left: -0.3vh;
}
<div class="pointer" id="pointer">
<span></span>
<span></span>
</div>

Answer 1

By using transform: rotate without specifying the point around which rotation will take place, the system defaults to rotating about the mid point of each element. That, coupled with the natural distance between two block elements can cause a problem.
If we make the rotation about the mid point of the top of each element and just enough down so that when they turn they overlap at the top and start them off overlapping each other exactly you get a more aligned result. We don't need to compensate by using margin left, we absolutely know that they are rotating about the same point.
.pointer{
position:absolute;
top: 50%;
left:50%;
}
.pointer span {
margin: 0;
padding: 0;
width: 1.7vh;
height: 4.5vh;
background: #41291B;
border-radius: 5vh;
display: inline-block;
position: absolute;
transform-origin: 0.85vh 0.85vh;
}
.pointer span:nth-child(1) {
transform: rotate(
45deg
);
}
.pointer span:nth-child(2) {
transform: rotate(
-45deg
);
}
<div class="pointer" id="pointer">
<span></span>
<span></span>
</div>