Edit in JSFiddle


              
            
          
            
              
                
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS3 Arrow Icons</title>
</head>
<body>
    <ul class="list-items">
        <li class="arrow">List 1</li>
        <li class="arrow arrow-left">List 2</li>
        <li class="arrow arrow-up">List 3</li>
        <li class="arrow arrow-down">List 4</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;
    width:280px;
    border-bottom:0;
    overflow:hidden;
}
.list-items li:first-child {
    border-radius:5px 5px 0 0;
    border-top:1px solid #ccc;
}
.list-items li:last-child {
    border-radius:0 0 5px 5px;
}

.list-items li {
    line-height:60px;
    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 20px;
    border:1px solid #bbb;
    border-top:0;
    position:relative;
}
.list-items li.arrow:after {
    position:absolute;
    top:50%;
    margin-top:-5px;
    content:' ';
    width:7px;
    right:10px;
    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);
}
.list-items li:hover {
    background: #f2f5f6;
    background: -moz-linear-gradient(top,  #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
    background: -webkit-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
    background: -o-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
    background: -ms-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
    background: linear-gradient(to bottom,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
}
.list-items li.arrow:hover:after {
    border-color:#444;
}
.list-items li.arrow-down:after {
    -ms-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
.list-items li.arrow-left:after {
    -ms-transform:rotate(225deg);
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    transform:rotate(225deg);
}
.list-items li.arrow-up:after {
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}