Делаем закругленные уголки с помощью псевдоэлементов :before и :after понедельник
8 октября

Задача: сделать врезку с закругленными уголками с минимумом html-кода.

Все, наверное, сталкивались с врезками с закругленными уголками. Поскольку множественный бэкграунд современные браузеры (кроме Safari) не поддерживают, то такие вещи приходится делать несколькими элементами, вложенными друг в друга.

Но есть способ уже сейчас избежать подобных вещей.

html-код:

<div class="incut">
  Текст
</div>

css-код:

Задаем голубой фон врезки:

.incut{background: #dff7ff;padding: 20px;}

Четыре уголка навешиваем на элементы :before и :after

.incut:before{
    content:url(i/border_tl.gif);
    background: url(i/border_tr.gif) no-repeat 100% 0;
    height: 7px;
    display: block;
    margin: -20px -20px 13px -20px;
}

.incut:after{
    content:url(i/border_bl.gif);
    background: url(i/border_br.gif) no-repeat 100% 0;
    height: 7px;
    display: block;
    margin:13px -20px -20px -20px;
}

Это работает во всех современных браузерах кроме IE (проверялось в Firefox 1–2, Opera 7–9, Safari 3). Для IE аналогичный функционал навешиваем с помощью JS (лучше помещать в отдельный файл CSS, специальный для IE):

.incut{
    zoom:1;
    behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');
}

Работает в IE 6—7. При отключеных скриптах пользователь ie увидит голубой фон у врезки, т.е.  ничего не сломается.

В результате имеем «пуленепробиваемую» врезку с минимумом html-кода. Заметьте, что вы можете указать ещё одну картинку у врезки, которая будет её бэкграундом.

Примеры смотрите здесь

Применяя эти псевдоэлементы, аналогичным образом можно значительно увеличить семантичность верстки. Всё зависит от вашей фантазии.