Простые ссылки вперёд/назад для навигации с закруглеными стрелками на CSS3. В создании стрелок использовался обычный элемент div и два псевдо-элемента  :after и :before. А сами закругления сделаны с помощью border-radius для псевдо-элементов.

Давайте посмотрим код.

HTML:

<nav>
 <a href="#" id="prev">Prev</a>
 <a href="#" id="next">Next</a>
</nav>

CSS:

#next,
#prev {
    color: #333;
    display: inline-block;
    font: normal bold 4em Arial,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 и ниже.

А вот и пример:

Перевод статьи "Rounded Previous and Next Arrows" с сайта "cssdeck.com, автор Winston Wolf .

P.S. Это тоже может быть интересно:

• CSS-выражения от контейнера для дизайнеров
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• «Запашки» кода React-компонентов