Як створити стрічки на CSS3 без зображень

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

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

У минулій статті Як створити словесний бульбашку на CSS3 без картинок ми досліджували, як псевдоелементи :before і :after використовуються для створення різних ефектів. У цій статті ми використовуємо подібні техніки для створення різноманітних стрічок.

<h2>Мій заголовок</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.