Простые ссылки вперёд/назад для навигации с закругленными стрелками на CSS3. В создании стрелок использовался обычный элемент div и два псевдо-элемента :after и :before. А сами закругления сделаны с помощью border-radius для псевдо-элементов.
Давайте посмотрим код.
HTML:
<nav>
<ahref="#"id="prev">Prev</a>
<ahref="#"id="next">Next</a>
</nav>
CSS:
#next,
#prev {
color:#333;
display:inline-block;
font: normal bold 4emArial,sans-serif;
overflow: hidden;
position: relative;
text-decoration: none;
width:auto;
}
#next,
#prev { padding: 0.5em 1.5em }
#next { text-align: right }
#next:before,
#next:after,
#prev:before,
#prev:after {
background:#333;
-moz-border-radius:0.25em;
-webkit-border-radius:0.25em;
border-radius:0.25em;
content:"";
display: block;
height:0.5em;
position: absolute;
right:0;
top:50%;
width:1em;
}
#prev:before,
#prev:after { left: 0 }
#next:before,
#prev:before {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#next:after,
#prev:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#prev:after,
#next:before { margin-top: -.36em }
#next:hover,
#next:focus,
#prev:hover,
#prev:focus { color: #c00 }
#next:hover:before,
#next:hover:after,
#next:focus:before,
#next:focus:after,
#prev:hover:before,
#prev:hover:after,
#prev:focus:before,
#prev:focus:after { background: #c00 }
/* container styles */
nav { text-align: center }
Не поддерживаются браузеры:
- Mozilla Firefox 3.5 и ниже.
- Internet Explorer 8.0 и ниже.
- Opera 10.0 и ниже.
А вот и пример:
В этой теме Вы можете задать вопрос о материале: Закруглённые стрелки “Назад” и “Вперёд” для навигации.