<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 Arrow Icons</title>
</head>
<body>
<ul class="list-items">
<li><i class="arrow"> </i></li>
<li><i class="arrow arrow-down"> </i></li>
<li><i class="arrow arrow-up"> </i></li>
<li><i class="arrow arrow-right"> </i></li>
</ul>
</body>
</html>
body {
color:#555;
font:normal 14px/1.3em'Segoe UI Light', 'Segoe UI', 'Open Sans', Arial;
}
.list-items {
margin:30px auto;
border-bottom:0;
overflow:hidden;
text-align:center;
}
.list-items li {
line-height:40px;
background: #f9fcf7;
background: -moz-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9fcf7), color-stop(100%,#f5f9f0));
background: -webkit-linear-gradient(top, #f9fcf7 0%,#f5f9f0 100%);
background: -o-linear-gradient(top, #f9fcf7 0%,#f5f9f0 100%);
background: -ms-linear-gradient(top, #f9fcf7 0%,#f5f9f0 100%);
background: linear-gradient(to bottom, #f9fcf7 0%,#f5f9f0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 );
padding:0;
border:1px solid #bbb;
position:relative;
cursor:pointer;
border-radius:5px;
margin:0 10px 0;
display:inline-block;
width:40px;
}
.arrow {
display:inline-block;
width:7px;
height:7px;
line-height:7px;
border-top:3px solid #aaa;
border-right:3px solid #aaa;
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.arrow:hover {
border-color:#444;
}
.arrow-down {
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg);
}
.arrow-left {
-ms-transform:rotate(225deg);
-moz-transform:rotate(225deg);
-webkit-transform:rotate(225deg);
transform:rotate(225deg);
}
.arrow-up{
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}