arrow button css

1<p>Right arrow: <i class="arrow right"></i></p>
2<p>Left arrow: <i class="arrow left"></i></p>
3<p>Up arrow: <i class="arrow up"></i></p>
4<p>Down arrow: <i class="arrow down"></i></p>
5
6.arrow {
7  border: solid black;
8  border-width: 0 3px 3px 0;
9  display: inline-block;
10  padding: 3px;
11}
12
13.right {
14  transform: rotate(-45deg);
15  -webkit-transform: rotate(-45deg);
16}
17
18.left {
19  transform: rotate(135deg);
20  -webkit-transform: rotate(135deg);
21}
22
23.up {
24  transform: rotate(-135deg);
25  -webkit-transform: rotate(-135deg);
26}
27
28.down {
29  transform: rotate(45deg);
30  -webkit-transform: rotate(45deg);
31}