Скругленные углы в 3 div-a

Веб разработка - CSS

Есть много способов делать в верстке скругленные углы. И пока все браузеры поголовно не начнут поддерживать свойство border-radius, надо будет каждый раз думать о том, какой метод использовать в том или ином проекте.

Есть множество разнообразных методов — от использования подложек блоков фиксированных размеров и до создания уголков с помощью vml или svg. В этом топике я не буду рассматривать известные методы, так как информации по данному поводу предостаточно. Я попробовал создать yet another метод.

Сразу оговорюсь — мой метод не панацея, и ему свойственны несколько минусов, которые я опишу подробнее.

Я постараюсь быть кратким.

Теория

Допустим, нам надо создать блок со скругленными углами.
По моему (говорю «моему», так как еще не встречал данного метода — если-что — поправьте) методу нам понадобится 3 дива и 1 изображение, на котором и будут наши уголки.

Для примера нарисуем простенькую картинку:

и назовем ее corners.png

На ней мы имеем 4 уголка, засунутых в 1 спрайт.
В данном случае я взял ширину картинки равную 16 пикселям — в обычном случае равных 1em.
Эту величину надо запомнить — так как это будет ширина одного «кванта», и все другие размеры будут кратны ему или уменьшены в парное колличество раз — 0.5, 0.25, 0.125…

Теперь представим, что у нас есть блок фиксированого размера — например 20em на 3em.
Если мы поставим ему стиль

то в итоге получим такой результат:


Следующим шагом будет добавление контейнера внутрь данного. Показываю, пока-что, схематически:


Как мы видим, ширина данного контейнера равна 100% от родительского — по горизонтали и 100%−1квант — по вертикали — чтобы нормально перекрыть фон родительского контейнера.

По такому-же методу создаем еще один контейнер в том, что мы только-что создали:



Как мы видим высота такого блока равна 100%+1квант от родительского и ширина 100%−1квант
Вот и весь метод.

Реализация

Сама разметка в данном случае выглядит так, как и говорилось — не больше и не меньше 3-х дивов

Css файл тоже не особо сложный. Стоит только учесть, что css в данном случае — для динамической высоты контента (высота кратная кванту), хотя можно сделать и с фиксированной высотой