Давайте рассмотрим то, что мы будем разрабатывать.
Концепт
Мы будем использовать псевдо-элементы для достижения ленточного эффекта. Мы также воспользуемся техникой создания тени для того, чтобы добиться эффекта прошивания.
Давайте приступим
Этап 1: HTML-разметка
Давайте начнем с создания простого элемента. HTML для этого элемента будет довольно простым.
HTML
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="my-ribbon">
I am a Ribbon
</div>
</body>
Этап 2: применяем CSS
Теперь давайте добавим небольшую стилизацию для div-элемента. Этот CSS-код также создаст эффект строчки. МЫ воспользуемся комбинацией box-shadow для того, чтобы добиться эффекта строчки. Если вам нужно более глубокое пояснение, обратитесь к этой публикации.
CSS для строчного эффекта
.my-ribbon {
font-size: 30px !important;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
width: 50%;
position: relative;
background: #7EB12C;
color: #fff;
text-align: center;
padding: 0.1em 0.2em;
margin: 150px 350px ;
/* The following CSS rules will give stitched look to our element */
-moz-box-shadow: 0 0 0 4px #7EB12C, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #7EB12C, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #7EB12C, 2px 1px 6px 4px rgba(10,10,0,.5);
border-top: 1px dashed rgba(0, 0, 0, 0.2);
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}
Теперь у нас будет следующее:
Этап 3: добавляем псевдо-элементы
Теперь нам нужно добавить 2 псевдо-элемента для создания ленточного эффекта. Псевдо-элементы имеют отрицательное значение в параметре z-index и разные фоны. Отрицательный z-index позволяет сделать так, чтобы баннер отображался поверх ленты.
CSS для псевдо-элементов
.my-ribbon:before, .my-ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #5F9900;
z-index: -1;
}
.my-ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.my-ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
И на этом наша ленточка готова! Предлагаем вам ознакомиться с финальным результатом:
* Посмотреть демо