Изображение
Навигация с закруглёнными краями, без использования изображений. Всё на чистом 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 - выставляем до получения оптимального отображения.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.