Любой, кто занимается версткой, так или иначе сталкивается с задачей создать блок со скругленными углами посредством CSS.
Существует огромное количество способов реализации данной задачи, но большинство из них сводится к тому, что необходимо использовать фоновое изображение для этих самых скругленных углов.
Такой способ имеет не мало недостатков, например такие как:
- для последующего изменения фона данного блока необходимо с помощью графической программы менять цвета уголков
- для изменения размера блока и радиуса углов так же необходимо менять размеры углов с помощью графической программы
Ниже я покажу, как можно решить данную задачу с использованием только CSS.
Итак, мы имеем: CSS, без единой картинки, без Javascript, с анти-аллиасингом (то есть плавные переходы), прозрачные углы (то есть в фоне может быть что угодно), тянущийся по высоте и ширине и, конечно же, кроссбраузерный метод.
HTML:
<div> <div> <em><b>•</b></em> <em><b>•</b></em> </div> <div> Текст </div> <div> <em><b>•</b></em> <em><b>•</b></em> </div> </div>
Здесь класс box используется чисто в эстетических целях (к примеру js цепляется именно к нему, то есть это означает, что блок будет со скругленными углами), никаких css-свойств на него не навешивается.
CSS:
div.w60 { width: 60%; margin: 0 auto; } div.box-c { height:20px; margin: 0 20px; position: relative; background: #C32300; } div.box-c em b { position:absolute; font:150px Arial; line-height:40px; font-weight:normal; } .ctl, .cbl, .ctr, .cbr { z-index:11; width:20px; height:20px; color:#C32300; overflow:hidden; position:absolute; background:transparent; } .ctl {top:0; left:-20px;} .cbl {bottom:0; left:-20px;} .ctr {top:0; right:-20px;} .cbr {bottom:0; right:-20px;} .ctl b {left:-8px;} .ctr b {left:-25px;} .cbl b {left:-8px; top:-17px;} .cbr b {left:-25px; top:-17px;} div.box-inner { padding: 0 20px; background: #C32300; }
Пример:
•
•
•
Где подвох?
Знающие уже, наверное, проанализировали код, и поняли — что вся суть в использовании &bull — обычного буллита, он у нас и круглый и сглаженный. Соответственно, в каждом из углов показываем нужную его часть, остальную скрывая.
Плюсы
- чистый CSS
- Без картинок
- Без Javascript
- Сглаженность
- Прозрачность углов
- Резиновость
Минусы
- изменение радиуса углов тянет за собой «подгадывание» радиуса буллита и его координат
Интернет магазин предлагает широкий выбор матрицы для ноутбуков — оптимальные цены, наличие и на заказа. Скидки.