Навигация с закруглёнными краями на CSS3
Навигация с закруглёнными краями, без использования изображений. Всё на чистом CSS.
Всё очень просто и понятно. Структура навигации:
Код:
<div class="nav-container">
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<div class="nav-left"></div>
<div class="nav-right"></div>
</nav>
</div>
CSS:
Код:
.nav-container {
margin-bottom: 2em;
width: 100%;
margin-right: -2em;
margin-top: 1em;
}
nav {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: .5em 3em;
margin-left: -14px;
margin-right: -14px;
background-color: #2a7b99;
background-image: -moz-linear-gradient(top, #389abe 0%, #2a7b99 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* IE10+ */
background-image: linear-gradient(to bottom, #389abe 0%,#2a7b99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */
position: relative;
border-top-left-radius: 1em 0.5em;
border-top-right-radius: 1em 0.5em;
-moz-border-radius-topleft: 1em 0.5em; /* FF4.0 */
-webkit-border-top-left-radius: 1em 0.5em; /* Chrome4.0, Safari5.0, iOS */
-moz-border-radius-topright: 1em 0.5em; /* FF4.0 */
-webkit-border-top-right-radius: 1em 0.5em; /* Chrome4.0, Safari5.0, iOS */
}
.nav-left {
position: absolute;
left: 0;
bottom: -14px;
width: 14px;
height: 14px;
background: #2a7b99;
border-bottom-left-radius: 100% 50%;
-moz-border-radius-bottomleft: 100% 50%; /* FF4.0 */
-webkit-border-bottom-left-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
}
.nav-left:after {
content: '';
position: absolute;
right: 0;
width: 66%;
height: 66%;
background: #000;
border-top-left-radius: 100% 50%;
border-bottom-left-radius: 100% 50%;
-moz-border-radius-topleft: 100% 50%; /* FF4.0 */
-webkit-border-top-left-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
-moz-border-radius-bottomleft: 100% 50%; /* FF4.0 */
-webkit-border-bottom-left-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
}
.nav-right {
position: absolute;
right: 0;
bottom: -14px;
width: 14px;
height: 14px;
background: #2a7b99;
border-bottom-right-radius: 100% 50%;
-moz-border-radius-bottomright: 100% 50%; /* FF4.0 */
-webkit-border-bottom-right-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
}
.nav-right:after {
content: '';
position: absolute;
left: 0;
width: 66%;
height: 66%;
background: #000;
border-top-right-radius: 100% 50%;
border-bottom-right-radius: 100% 50%;
-moz-border-radius-topright: 100% 50%; /* FF4.0 */
-webkit-border-top-right-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
-moz-border-radius-bottomright: 100% 50%; /* FF4.0 */
-webkit-border-bottom-right-radius: 100% 50%; /* Chrome4.0, Safari5.0, iOS */
}
nav li {
display: inline;
list-style: none;
border-right: 1px dashed #999;
}
nav li:last-of-type {
border-right: 0;
}
nav li a {
text-decoration: none;
font-size: 1.2em;
color: #2c2e24;
font-weight: bold;
display: inline-block;
text-align: center;
padding: .5em;
}
nav li a:hover,
nav li a.selected {
color: #fff;
}
Для полной красоты имеет смысл сделать навигацию выходящую за границы форума, для этого находим:
Код:
nav {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: .5em 3em;
margin-left: -14px;
margin-right: -14px;
...
-14px - выставляем до получения оптимального отображения.
