Оказывается, проблема скругленных уголков все еще актуальна на сегодняшний день. Предлагаю свой метод решения данной проблемы с минимальным количеством кода, без использования JS и удобной, легко масштабируемой объектной структурой блока, отображаемой во всех популярных браузерах (IE6/7, Mozilla Firefox 2/3, Opera 9 и Safari 3).
На сегодняшний момент у большинства веб-разработчиков самая популярная конструкция является (признаюсь честно, я тоже так делал 2 года назад):
<div
id=
"block-name"> <div
class=
"corner1"> <div
class=
"corner2"> <div
class=
"corner3">Content
</div
> </div
> </div
></div
> А то и вовсе с использованием таблицы.
Данная конструкция не рекомендована к использованию. Я не буду расписывать, чем она не удобна, скажу просто – она не соответствует всем выше изложенным требованиям.
И так приступим:
1. Описываем xhtml структуру блока:
<!-- Block 1 --><div
id=
"block-name1" class=
"corners"> <!-- Corner top left --> <div
class=
"corner-tl"><!-- spacer --></div
><!-- end .corner-tl --> <!-- Corner top right --> <div
class=
"corner-tr"><!-- spacer --></div
><!-- end .corner-tr --> <!-- Content --> <div
class=
"content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
</div
><!-- end .content --> <!-- Corner bottom left --> <div
class=
"corner-bl"><!-- spacer --></div
><!-- end .corner-bl --> <!-- Corner bottom right --> <div
class=
"corner-br"><!-- spacer --></div
><!-- end .corner-br --></div
><!-- end #block-name1 .corners --> 2. Скопируем весь код блока и вставим его еще раз, после закрывающего “end #block-name1 .corners” и поставим между ними <br />. После чего изменим id нового блока с “block-name1” на “block-name2”. Сейчас поймете зачем.
Примечание: В пустых дивах помещен простой комментарий, это не значит, что сюда нужно вставлять картинку и т д.
3. Затем опишем CSS свойства:
/* Blocks */
#block-name1{
width:100%
}
#block-name2{
width:240px
}
“block-name1” делаем по ширине 100% - резиновый, а “block-name2” - фиксированный, например 240px.
Далее задаем свойства для класса corners и для каждого дива с уголком (corner-tl , corner-tr, corner-bl, corner-br):
/* Corners */
.corners{
position:relative;
margin:0;
padding:0;
background:#003366;
color:#FFF
}
.corners .content{
position:relative;
z-index:10;
padding:4px
}
.corners div.corner-tl,
.corners div.corner-tr,
.corners div.corner-bl,
.corners div.corner-br{
width:12px;
height:12px;
position:absolute
}
.corners div.corner-tl{
top:0;
left:0;
background:url(corner-tl.gif) top left no-repeat
}
.corners div.corner-tr{
top:0;
right:0;
background:url(corner-tr.gif) top right no-repeat
}
.corners div.corner-bl{
bottom:0;
left:0;
background:url(corner-bl.gif) top left no-repeat
}
.corners div.corner-br{
bottom:0;
right:0;
background:url(corner-br.gif) top right no-repeat
}
Обратите внимание на то, что у класса “corners” имеется обязательный атрибут position:relative, иначе ни чего не получится!
Через запятую описываем одинаковые свойства для классов: corner-tl , corner-tr, corner-bl, corner-br, обязательно position:absolute.
После чего, для каждого дива с уголком задаем свой background image.
Примечание:
corner-tl – top left – верхний левый
corner-tr – top right – верхний правый
corner-bl – bottom left – нижний левый
corner-br – bottom left – нижний правый
4. Рендерим:
Firefox 2.0:
OkeyFirefox 3.0 beta 2:
OkeySafari 3.0.4:
OkeyOpera 9.2:
OkeyOpera 9.50 beta:
OkeyIE6: как всегда
SuckIE7:
OkeyРезультат.
5. В IE6 справа и внизу появились одно пиксельные отступы, это связано с тем, что IE6 неверно понимает свойства right и bottom (досталось в наследство от IE5), к сожалению, не существует универсального метода для “лечения” этой простой “болезни”, поэтому придется переписать заново кое-какие свойства.
Будем использовать трюк со “звездочкой”, который видит только IE6. Через запятую заново описываем одинаковые свойства для классов: corner-tl , corner-tr, corner-bl, corner-br, но вначале пишем * html и обязательно position:relative:
/* Fixed for IE6 */
* html .corners div.corner-tl,
* html .corners div.corner-tr,
* html .corners div.corner-bl,
* html .corners div.corner-br{
position:relative
}
/* end fixed */
После чего, для каждого дива с уголком задаем нужное ему свойство float, а для нижних уголков задаем отрицательный верхний margin:
* html .corners div.corner-tl{
float:left
}
* html .corners div.corner-tr{
float:right
}
* html .corners div.corner-bl{
float:left;
margin:-12px 0 0
}
* html .corners div.corner-br{
float:right;
margin:-12px 0 0
}
Так же задаем свойства для дива с контентом clear:both тем самым гарантировав, что данный див не будет обтекать див с уголком и подымаем блок вверх на высоту дива с уголком (-12px), используя отрицательный margin:
* html .corners .content{
clear:both;
margin:-12px 0 0
}
6. Снова рендерим:
Firefox 2.0:
OkeyFirefox 3.0 beta 2:
OkeySafari 3.0.4:
OkeyOpera 9.2:
OkeyOpera 9.50 beta:
OkeyIE6:
OkeyIE7:
OkeyВсе сделали! Блок с динамическими уголками, как по ширине, так и по высоте готов.
Результат.
Затраченное время чуть менее
15 минут.
