Нумерация страниц CSS

Пример оформления нумерации страниц с использованием CSS. 

HTML

<ul>
<li><i>A</i></li>
<li><i>B</i></li>
<li><i>C</i></li>
<li><i>D</i></li>
<li class="active"><i>E</i></li>
</ul>
<ul>
<li><i>1</i></li>
<li><i>2</i></li>
<li><i>3</i></li>
<li class="active"><i>4</i></li>
<li><i>5</i></li>
<li><i>6</i></li>
<li><i>7</i></li>
<li><i>8</i></li>
<li><i>9</i></li>
</ul>
<ul>
<li><i>Home</i></li>
<li class="active"><i>Services</i></li>
<li><i>Contact</i></li>
</ul>

CSS

body {
 margin: 20px;
 font-family: arial;
}

ul {
 margin: 0 0 20px 0;
 padding: 0;
 font-size: 0;
 list-style: none;
 cursor: default;
 border-radius: 3px;
 font-weight: 700;
}

li {
 display: inline-block;
 font-size: 20px;
 color: white;
 height: 50px;
 line-height: 50px;
 display: inline-block;
 padding: 0 20px;
 -webkit-transform: skew(-15deg);
 -moz-transform: skew(-15deg);
 transform: skew(-15deg);
 background-color: #363636;
 background-image: -webkit-linear-gradient(top, #3b3b3b, #323232);
 background-image: linear-gradient(to bottom, #3b3b3b, #323232);
 background-repeat: repeat-x;
 margin-right: -1px;
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
}

li i {
 display: block;
 font-style: normal;
 pointer-effects: none;
 -webkit-transform: skew(15deg);
 -moz-transform: skew(15deg);
 transform: skew(15deg);
}

li:first-child:before, li:last-child:after {
 content: '';
 position: absolute;
 display: block;
 top: 0px;
 left: -8px;
 width: 15px;
 height: 50px;
 -webkit-transform: skew(15deg);
 border-radius: 3px 0 0 3px;
 background-color: #363636;
 background-image: -webkit-linear-gradient(top, #3b3b3b, #323232);
 background-image: linear-gradient(to bottom, #3b3b3b, #323232);
 background-repeat: repeat-x;
}

li:last-child:after {
 left: auto;
 right: -8px;
 border-radius: 0 3px 3px 0;
}

li:hover, li.active {
 background-color: #5fa9c5;
 background-image: -webkit-linear-gradient(top, #74d7fc, #4b7c8e);
 background-image: linear-gradient(to bottom, #74d7fc, #4b7c8e);
 background-repeat: repeat-x;
 color: black;
 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

li:first-child:hover:before,
li:last-child:hover:after,
li:first-child.active:before,
li:last-child.active:after {
 background-color: #5fa9c5;
 background-image: -webkit-linear-gradient(top, #74d7fc, #4b7c8e);
 background-image: linear-gradient(to bottom, #74d7fc, #4b7c8e);
 background-repeat: repeat-x;
}

li:first-child i {
 margin-left: -5px;
}

li:last-child i {
 margin-right: -5px;
}