Заголовок в виде ленточки

Давайте сделаем заголовок в виде ленточки, не используя никаких рисунков.
Вот как это будет выглядеть. 

Все любят ленточки

Вот что для этого потребуется

HTML

Code<div class=»non-semantic-protector»>
<h1 class=»ribbon»>
  <strong class=»ribbon-content»>Все любят ленточки</strong>
</h1> </div>

CSS

Code
.ribbon {
  font-size: 16px !important;
  width: 50%;
  position: relative;
  background: #ba89b6;
  color: #fff;
  text-align: center;
  padding: 1em 2em;
  margin: 2em auto 3em;
}
.ribbon:before, .ribbon:after {
  content: «»;
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #986794;
  z-index: -1;
}
.ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent;
}
.ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  content: «»;
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #804f7c transparent transparent transparent;
  bottom: -1em;
}
.ribbon .ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;

.non-semantic-protector {position: relative; z-index: 1;}

Без комментариев.
По материалу сайта http://css-tricks.com/snippets/css/ribbon/

Комментарии на Facebook