Ну не буду забегать вперед, опишу все по порядку.
Что нам понадобится для реализации нашей идеи?
Для начала создадим в графическом редакторе рисунок, например. Размером 72 px × 56 px. Размер может меняться в зависимости от Ваших потребностей.
Вот так будет выглядеть рисунок:
При создании рисунка следует сделать его фон совпадал с фоном страницы или блока – родителя элемента у которого мы создаем овальные уголки.
Далее зайдем в html-редактор создадим файл со следующей структурой:
html
Это будет просто блок, внутри которого будет несколько абзацев текста. Обратите внимание на пустые элементы <i>
внутри блока. Это как раз и есть наши будущие овальные уголки.
Немного оформим наш документ:
CSS
Благодаря этим правилам наш блок уже выглядит более мене прилично, правда уголки прямые. Поэтому двигаемся дальше. Так как наши уголки будут отпозиционированы абсолютно, нам нужно добавить следующее правило к блоку div#primer
CSS
Далее переходим непосредственно к оформлению уголков. Уголки оформляются при помощи сочетания правил из двух классов. Правила из «первого» класса (corner
) будут применены к каждому из элементов, а дополнительный (второй) класс будет у всех элементов разным.
Итак, класс corner:
CSS
Фоном наших элементов <i> будет картинка с изображением уголков. Ширина и высота каждого элемента <i>
будет равна половине ширины и высоты рисунка. Кроме того, устанавливаем свойству position
элемента значение absolute
. А уточнять позиции каждого уголка будем правилах индивидуального класса (.tls, .trs, .bls, .brs
)
Вот так будет выглядеть код:
CSS
Например, верхний правый угол будет размещен на 1 пиксель выше и правее своего родителя. Это нужно для того, чтобы граница блока-родителя (div#primer
) совпала с фоном нашего уголка, и не было заметно переходов от границы к изображению. Сам фон также сдвинут вправо на 100%.
У левого уголка отсутствует определение свойства background-position, потому он попадает под соответствующее правило из класса corner
.
Таким образом, применив указанные выше правила к нашему документу, мы получим блок с овальными уголками.
Правда, сейчас эти уголки скрывают под собой текст из абзацев, это происходит из-за того что абсолютно позиционированные элементы выходят из потока документа. Чтобы решить эту проблему применяем ко всем абзацам следующее правило:
CSS
В результате мы добились своего и теперь на нашей страничке блок с овальными уголками.