Лента на CSS3 для оформления текста

<div class="ribbon">  
<h2 class="simple">Лента на CSS3</h2>  
  <p>Эффект ленты снова в моде. Для создания ленты нам понадобится только тег <h2> </p>  

<h2>Использование</h2>  
  <p>Такой элемент дизайна можно использовать для меню, фона, заголовков и других частей.</p>  

<h2>Плюсы и минусы</h2>  
  <p>Для простых лент вполне можно использовать CSS, чтобы уменьшить количество загружаемых в браузер пользователя изображений.  
Лента будет отображаться в современных браузерах, поддерживающих CSS3.</p>  
</div>

.ribbon{  
width: 70%;  
padding: 55px;  
margin: 0 auto;  
background-color: #fff;  
border: 1px solid #333;  
border-radius: 6px;  
-webkit-border-radius: 6px;  
-moz-border-radius: 6px;}  

h2 {  
position: relative;  
width: 50%;  
font-size: 1.5em;  
font-weight: bold;  
padding: 6px 20px 6px 70px;  
margin: 30px 10px 10px -75px;  
color: #000000;  
background-color: #B14444;  
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;}  

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;}  

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