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

Передыдущий пост, был бы не полным, без отражения возможности использовать блок с закругленными углами с окаймляющим его border-ом и так любимым мной градиентом.

Опять же, только html и css. Стили слегка увеличились в размерах это и понятно, html не претерпел никаких изменений.

Скриншот. В первом случае углы у контейнера обрезаны под углом 45 градусов, во втором задан не большой радиус, в третьем - так называемый псевдорельеф.

Подробно останавливаться на html и css нет необходимости, теория подобных построений давно изложена, лучше, едва ли смогу написать. Будем считать данный цикл статей руководством к действию, теория в практических примерах.

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

Дерзайте!

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

Не секрет, что существует пара-тройка приемов, как-то: графика - абсолютное позиционирование четырех уголков для контейнера или три графических рисунка с размножением среднего по вертикали, применение JavaScript, ну и создание закругленных уголков с помощью html и css.

Недостатки перечисленных способов очевидны.

В первом случае проблемы с добавлением градиента, да и четыре графических файлика даже при минимальном размере, а если таких блоков будет несколько?

Во втором, размеры тоже играют решающую роль, а рисовать в Photoshop закругления, да еще с градиентом, мало кому по вкусу.

JavaScript тут уже размеры скрипта превосходят все допустимые нормы, плюс часто обоснованное не желание иметь с ним, вообще, никаких дел.

И, как говорится, лично для меня, без альтернативный вариант, использование только html и css.

Написано на эту тему, если не океан, то уж точно море статей, руку и сам приложил, а шаблон псевдорельеф, так же пользуется популярностью. Но ...

Что тут скажешь, не хватало мне возможности пристроить градиент и все, как не крути, а с ним то веселее будет ;)

В общем, скриншот перед вами.

О html и css, распространяться не буду. Тестовая страница.

К сожалению, на данном этапе, создание простыми средствами, имеется в виду, только, html и css, блоков не с прямыми углами, является проблемой если не номер один при дизайне, верстке web-страниц, то, как минимум номер два, это уж точно.

Как было бы прекрасно, если в не далеком будущем в спецификации "Каскадных таблиц стилей", появилась пара-тройка свойств типа - radius:параметры закругления; corner:параметры наклона угла; приблизительно так в сокращенной форме записи:

.box {
  radius: 5 5 5 5;
}
.block {
  corner: 45 45 45 45;
}

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

Все, о чем пойдет речь ниже, не является эксклюзивом, все придумано давно и не мной ;)

Итак, border-всемогущий.

Простой, минимально возможный html, тоже самое, можно сказать и о css.

Но по порядку:

html

<div class="border">
<div class="top"></div>
<p>Текст</p>
<div class="bottom"></div>
</div>

Как видим, нет ничего сложного.

css

.border {
  background-color:#a00;
  color:#fff;
  font:11px Verdana;
  margin:3px 20px;
  width:210px;
}
.border p {margin:0;padding:0 8px;}
.top,
.top_r,
.top_l,
.top_no,
.bottom,
.bottom_r,
.bottom_l,
.bottom_no {
  background-color:#fff; /* под цвет фона страницы */
  border:#fff 7px solid;
  font-size:0;
  height:0;
}

.top_r,.top_no,.bottom_r,.bottom_no {border-left:0;}
.top_l,.top_no,.bottom_l,.bottom_no {border-right:0;}
.top,.top_r,.top_l,.top_no {border-top:0;}
.bottom,.bottom_r,.bottom_l,.bottom_no {border-bottom:0;}

.top,.top_r,.top_l,.top_no {border-bottom:#a00;}
.bottom,.bottom_r,.bottom_l,.bottom_no {border-top:#a00;}

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

7px данный параметр создает эффект наклона, хотя все углы обрезаны под углом 45 градусов.

На скриншоте, представлены не которые варианты возможностей предлагаемых стилей. Для каждого контейнера указан html.

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