Как сделать ленты на CSS3 без картинок

Оригинал: sitepoint.com/pure-css3-ribbons

Перевод: Влад Мержевич

В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.

<h2>My Heading</h2>

Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.

/* элемент с контентом */
#page {
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #333;
}
h2 {
	position: relative;
	width: 50%;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	margin: 30px 10px 10px -71px;
	color: #555;
	background-color: #999;
	text-shadow: 0px 1px 2px #bbb;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}

В нашем примере у #page заданы поля по 50px и рамка толщиной в 1px. У заголовка имеется левый отступ значением -71px, так что он перекрывает край на 20px. Заметьте, мы также используем position: relative чтобы при необходимости можно было позиционировать другие элементы ленты.

Теперь нам нужно создать сложенную часть ленты, которая проходит «за страницей». Как было видно в предыдущей статье, мы можем использовать свойство border для создания любого типа треугольника с помощью псевдоэлемента :after нулевой ширины и высоты.

h2:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}

Выглядит здорово и это может быть всё, что вам нужно. Но клиенты любят страницы насыщенные дизайном, так что немного доработаем ленту. Для начала мы можем добавить форму в виде флага к правому краю путём наложения белого треугольника через псевдоэлемент :before.

Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.

h2:before {
	content: ' ';
	position: absolute;
	width: 30px;
	height: 0;
	left: -30px;
	top: 12px;
	border-width: 20px 10px;
	border-style: solid;
	border-color: #999 #999 #999 transparent;
}

Пожалуйста, ознакомьтесь с демонстрационной страницей где показаны все три стиля ленты. Как и ожидалось, это работает в IE8, IE9, Firefox, Chrome, Safari и Opera. IE6 и IE7 показывают изящную деградацию и отображают основной заголовок. Весь код CSS содержится внутри HTML.