Закладки с закругленными углами

Закладки с закругленными углами очень легко сделать с помощью границ радиуса. Но он лишь позволяет сократить форму. А что, если нам нужны соединенные формы. Вот такие:

Исходники

HTML

Чтобы сделать все наилучшим образом, используем код CSS и семантическую разметку HTML. Структура закладок выглядит так:

<ul class="tabs group">
 <li class="active"><a href="#one">Раз</a></li>
 <li><a href="#two">Два</a></li>
 <li><a href="#three">Три</a></li>
 <li><a href="#three">Четыре</a></li>
 </ul>

Последовательность работы

Будем использовать псевдо элементы. Их можно добавлять к структуре страницы прямо из CSS.

Псевдо элементы :before и :after принадлежат каждому элементу. Поскольку закладка состоит из списка и ссылки, то в конечном результате у нас будет 4 псевдо элемента на 1 закладку.

Сначала сделаем все в графическом варианте:

 - Исходное состояние

Пункты списка – блочные элементы, а ссылки – строчные. Смотрим код:

- Горизонтальное состояние

Элементы списка будут находиться рядом друг с другом, и сжиматься до определенных размеров ссылки, находящейся в них.

 - Одинаковый размер

У пунктов списка нет полей отступов, они плотно стоят один возле другого.

 - Один элемент

Рассмотрим, как делать закладки с помощью одного элемента.

- Круги

Используем 2 из 4 доступных псевдо элемента, для размещения кругов в левом нижнем и правом нижнем углах закладки.

- Квадраты

Остальные элементы применяются для создания квадратов

- Добавляем цвета в закладки и к содержанию

У активной закладки  и содержания одинаковый цвет  фона.

- Раскрашиваем псевдо элементы

Квадраты под цвет активной закладки, круги имеют такой же цвет, как и фон позади активной закладки.

 - Укладка

z-index  - размещает круги сверху квадратов, для формирования необходимой формы.

 - Отключение рамок

Рамки были нужны только для иллюстрации. В работе они не нужны.

 - Завершение работы

Такой же метод используется для внешних закладок.

CSS

.tabs li {
		  /* Делаем горизонтальную строку */
			float: left; 

			/* Теперь псевдо элементы могут быть абсолютно позиционированы внутри */
			position: relative;
		}
		.tabs a {
		  /* Делаем его блочным и так ширины, как ему требуется */
		  float: left;
		  padding: 10px 40px;
		  text-decoration: none;

		  /* Цвета по умолчанию */
		  color: black;
		  background: #ddc385; 

		  /* Скругляем только верхние углы */
		  -webkit-border-top-left-radius: 15px;
		  -webkit-border-top-right-radius: 15px;
		  -moz-border-radius-topleft: 15px;
		  -moz-border-radius-topright: 15px;
		  border-top-left-radius: 15px;
		  border-top-right-radius: 15px;
		}
		.tabs .active {
		  /* Активная закладка находится сверху */
		  z-index: 3;
		}
		.tabs .active a {
		  /* Цвета активной закладки */
		  background: white;
		  color: black;
		}
		.tabs li:before, .tabs li:after,
		.tabs li a:before, .tabs li a:after {
		  /* Все псевдо элементы абсолютно позиционируются и находятся внизу */
		  position: absolute;
		  bottom: 0;
		}
		/* Только первая, последняя и активная закладки
		   нуждаются во всех псевдо элементах */
		.tabs li:last-child:after,   .tabs li:last-child a:after,
		.tabs li:first-child:before, .tabs li:first-child a:before,
		.tabs .active:after,   .tabs .active:before,
		.tabs .active a:after, .tabs .active a:before {
		  content: "";
		}
		.tabs .active:before, .tabs .active:after {
		  background: white; 

		  /* Квадраты позади кругов */
		  z-index: 1;
		}
		/* Квадраты */
		.tabs li:before, .tabs li:after {
		  background: #ddc385;
		  width: 10px;
		  height: 10px;
		}
		.tabs li:before {
		  left: -10px;
		}
		.tabs li:after {
		  right: -10px;
		}
		/* Круги */
		.tabs li a:after, .tabs li a:before {
		  width: 20px;
		  height: 20px;
		  /* Делаем круги */
		  -webkit-border-radius: 10px;
		  -moz-border-radius:    10px;
		  border-radius:         10px;
		  background: #222;

		  /* Круги поверх квадратов */
		  z-index: 2;
		}
		.tabs .active a:after, .tabs .active a:before {
		  background: #ddc385;
		}
		/* Первая и последняя закладки имеют разные внешние цвета */
		.tabs li:first-child.active a:before,
		.tabs li:last-child.active a:after {
		  background: #222;
		}
		.tabs li a:before {
		  left: -20px;
		}
		.tabs li a:after {
		  right: -20px;
		}