Конечный результат Что мы будет создавать Делаем согнутую ленточку с помощью CSS3 за 5 минут * Шаг 1: База Мы начнем с обычного документа HTML. Вы также заметите, что мы привязаны к Google Web Fonts API, чтобы применить симпатичный шрифт Montez.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swish CSS3 folded ribbon effect.</title>
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
</head>
<body>
</body>
</html>

Теперь добавим элемент ленточки. Да, именно один элемент нам и понадобится. В нашем случае мы используем h1 header:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8" />

<title>Swish CSS3 folded ribbon effect.</title>

<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>

</head>

<body>

<h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1>

</body>

</html>
Шаг 2
Откройте новый файл CSS, привяжите его в разделе head и добавьте в него несколько стилей.
html {
background: url(black-linen.png);   /* Black Linen http://subtlepatterns.com */
}

body {
margin: 0;
padding: 100px 0 0 0;
}

.ribbon {
padding: 0 25px;
height: 80px;

background: #c94700;
color: #301607;

position: relative;
float: left;
clear: left;

font-family: 'Montez', cursive;
font-size: 32px;
line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
Уже выглядит довольно-таки неплохо, не правда ли?

Делаем согнутую ленточку с помощью CSS3 за 5 минут *

Шаг 3: Сгиб
Мы добавим сгиб, применяя селектор :after. 
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;

position: absolute;
right: 0;
bottom: 0px;
z-index: 20;

border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;
}

Делаем согнутую ленточку с помощью CSS3 за 5 минут *

Шаг 4

Теперь нам нужно повернуть фигуру вот так:

По умолчанию объект будет поворачиваться вокруг своего центра. Нам же нужно чтобы опорной точкой стал правый нижний угол. Вот, что у нас получилось:

highlight="41-50"
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;

position: absolute;
right: 0;
bottom: 0px;
z-index: 20;

border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;

-webkit-transform: rotate(90deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(90deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(90deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(90deg);
-ms-transform-origin: right bottom;
transform: rotate(90deg);
transform-origin: right bottom;
}

Каждый параметр transform:rotate переворачивает объект на 90°. А параметр transform-origin отвечает за опорную точку. Ну как выглядит? Шаг 5: Тени

Чтобы добавить немного объема эффекту, давайте поместим тени под изгиб. Это очень просто: мы будем использовать элемент :before и проделаем практически то же самое, что и с :after; 

.ribbon:before {
content: "";
display: block;
width: 40px;
height: 0px;

position: absolute;
right: 0;
bottom: 0px;
z-index: 10;

border-bottom: 80px solid #000000;
border-right: 80px solid transparent;

-webkit-transform: rotate(80deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(80deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(80deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(80deg);
-ms-transform-origin: right bottom;
transform: rotate(80deg);
transform-origin: right bottom;
}

Вот, что у нас получится: Шаг 6: Нежнее, еще нежнее

Поиграем немного с прозрачностью и не только. 

.ribbon:before {
content: "";
display: block;
width: 20px;
height: 0px;

position: absolute;
right: 0;
bottom: 0px;
z-index: 10;

border-bottom: 80px solid rgba(0, 0, 0, 0.3);
border-right: 80px solid transparent;

Мы поменяли цвет бордера #000000 на его RGBA эквивалент, что нормально для всех современных браузеров, включая IE9. Если вы хотите поддерживать ранние версии IE, то нужно прописать следующий код: 

/* необходимо для IE 5, 6, 7 */
zoom: 1;

/* прозрачость 30% */
filter: alpha(opacity=30);

Добавим похожую тень в самой ленте. 

.ribbon {
padding: 0 25px;
height: 80px;

background: #c94700;
color: #301607;

position: relative;
float: left;
clear: left;

font-family: 'Montez', cursive;
font-size: 32px;
line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);

-moz-box-shadow:        -7px 7px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:     -7px 7px 0px rgba(0, 0, 0, 0.3);
box-shadow:             -7px 7px 0px rgba(0, 0, 0, 0.3);
}

Вот, что получается:Делаем согнутую ленточку с помощью CSS3 за 5 минут *

Шаг 7: Обводка

Мы написали практически весь код для ленточки, осталось только внести пару дополнений. 

.ribbon {
padding: 0 25px;
height: 80px;

color: #301607;

background-color: #c94700;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100));
background-image: -webkit-linear-gradient(top, #c94700, #b84100);
background-image:    -moz-linear-gradient(top, #c94700, #b84100);
background-image:     -ms-linear-gradient(top, #c94700, #b84100);
background-image:      -o-linear-gradient(top, #c94700, #b84100);
background-image:         linear-gradient(top, #c94700, #b84100);

border-bottom: 1px solid rgba(255, 255, 255, 0.3);

Мы добавили легкий градиент на ленту и обводку по нижнему краю: 

.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;

position: absolute;
right: 0;
bottom: -1px;
z-index: 20;

Шаг 8: Последний штрих

Теперь давайте сгладим нижний угол: 

[39] border-bottom-right-radius: 20px 5px;
[50] bottom: 4px;
[76] bottom: 4px;

Делаем согнутую ленточку с помощью CSS3 за 5 минут *