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