Позиционирование тега hr

Всем привет!
Никогда не пользовался <hr>, и тут, нате-здрасьте, понадобилось!
Методом научного тыка получилось "нарисовать" линию из левого верхнего угла экрана под углом в 45 градусов в сторону правой нижней части экрана.
CSS:

Код (Text):

1.     hr {
2.         top: -22px;
3.         left: 36px;
4.         height: 100px;
5.         transform: rotate(-45deg);
6.         width: 1px;
7.         position: absolute;
8.         background-color: #228B22;
9.     }

В связи с этим вопросы:
1) Значение top от верхней части экрана до чего?
2) Значение left от левой части экрана до чего?

 

Это понятно. Только почему-то в top у меня получается смещение -9px

С этим как раз вопросов нет))