Скругленные границы через CSS

Боремся с дизайнерскими фантазиями — ищем простые способы верстки скругленных границ и произвольных многоугольников

Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.

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

1. Скругленные границы

Сразу поясню о чем речь:



Необходимо сверстать этот блок так, чтобы он тянулся по ширине и высоте. Как правило, первое что приходит в голову — сверстать таблицу 3x3. В угловые ячейки положить 4 разных изображения с уголками, в центр поместить контент, а остальным ячейкам повесить соот-ие бордеры. Способ кроссбраузерный и довольно простой. Но во-первых, верстать такие блоки таблицами не по фэншую, а во-вторых можно отказаться от четырех мелких изображений.

Итак, соберем четыре угла в одно изображение. В моем примере получился такой результат (32x26 px):



Теперь нам осталось спозиционировать это изображение в фоне четырьмя разными способами в блоках размером 16x13px, стоящими в углах блока. В результате у автора получилось вот так:

CSS:

.roundborder {    border-top:1px solid #DBDBDB;    border-bottom:1px solid #DBDBDB;}    .roundborder .content {        border-left:1px solid #DBDBDB;        border-right:1px solid #DBDBDB;            text-align:center;        color:#7A7A7A;        padding:10px 15px;    }    .roundborder .t, .roundborder .b {        position:relative;        height:12px;    }        .roundborder .t div, .roundborder .b div {            position:absolute;            width:16px; height:13px;            padding:0; margin:0;        }        .roundborder .t .l {            top:-1px; left:0;            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top left;        }        .roundborder .t .r {            top:-1px; right:0;            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top right;        }        .roundborder .b .l {            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom left;            bottom:-1px; left:0;        }        .roundborder .b .r {            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom right;            bottom:-1px; right:0;        }

HTML:

<div class="roundborder">    <div class="t">        <div class="angles l"></div>        <div class="angles r"></div>    </div>    <div class="content">        Content    </div>        <div class="b">        <div class="angles l"></div>        <div class="angles r"></div>    </div></div>

Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом. Итак, задача решена: мы избавились от таблиц и уменьшили число HTTP-соединений на три, за счет сбора углов в один овал.

источник: fastcoder.org