Эффект загнутого уголка при помощи CSS

Мне очень понравился этот трюк: создание блоков с загнутым уголоком только при помощи CSS3, а точнее, добавление и позиционирование цветного флажка из псевдо-элемента.
В эти блоки можно помещать фразы/цитаты, оформлять и выделять какие-либо важные части текста и т.п.
Всё это безобразие обещано работать в Firefox 3.5 +, Chrome 4 +, Safari 4 +, Opera 10 +, IE 8 +.
Не буду тянуть резину, кому интересен процесс, могут заглянуть в статью первоисточника.

А я сперва покажу готовый CSS код, который можете целиком или по частям скопировать к себе в шаблон Blogger (разумеется, цвета и закругления настраиваются).
Код копируется без тегов <style></style> в шаблон блога перед тегом ]]></b:skin>

.note {

    position:relative;

    width:480px;

    padding:1em 1.5em;

    margin:2em auto;

    color:#fff;

    background:#97C02F;

    overflow:hidden;

}



.note:before {

    content:"";

    position:absolute;

    top:0;

    right:0;

    border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */

    border-style:solid;

    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */

    background:#658E15; /* For Opera when also applying a border-radius */

    display:block; width:0; /* Only for Firefox 3.0 damage limitation */

    /* Optional: shadow */

    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

}



.note.red {background:#C93213;}

.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}



.note.blue {background:#53A3B4;}

.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}



.note.taupe {background:#999868;}

.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}



.note.rounded {

    -webkit-border-radius:5px;

    -moz-border-radius:5px;

    border-radius:5px;

}



.note.rounded:before {

    border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */

    border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */

    -webkit-border-bottom-left-radius:5px;

    -moz-border-radius:0 0 0 5px;

    border-radius:0 0 0 5px;

}

По завершению настроек от пробелов между строк лучше избавиться.

И уже в любом месте блога, будь то статья или виджет, можете использовать (в html режиме) такие блоки ↓
Классы оформления:

<div class="note">Здесь что-то интересное</div>

<div class="note red rounded">Лучше меньше, да лучше</div>

<div class="note blue">Съешь ещё этих мягких булок</div>

<div class="note taupe">Леночка, у нас есть wi-fi? Да, Виктор Геннадьевич, у нас есть wi-fi.</div>

По-моему, получилось очень даже симпотично.