Оглавление скрыть


Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


div с закругленными углами

Каждый верстальщик сайтов сталкивался с задачей создания слоя с закругленными углами. Сделать слой одного фона с закругленными углами очень просто.

Нам понадобится создать 4 изображения-угла, CSS и HTML.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!−− родительский слой должен иметь цвет фона, такой же как у углов
.round-gray {background-color:#dddddd; width:300px;}

/**
* фоновое изображение каждого углами не повторяется
* tl — top left (верхний левый)
* tr — top right (верхний правый)
* br — bottom right (нижний правый)
* bl — bottom left (нижний левый)
*
*/

.round-gray .tl,
.round-gray .tr,
.round-gray .br,
.round-gray .bl {background-repeat:no-repeat;}

<!−− для каждого угла прописываем свое изображение и позицию на слое
.round-gray .tl {background-image:url('/i/round/gray/tl.gif'); background-position:top left;}
.round-gray .tr {background-image:url('/i/round/gray/tr.gif'); background-position:top right;}
.round-gray .br {background-image:url('/i/round/gray/br.gif'); background-position:bottom right;}
.round-gray .bl {background-image:url('/i/round/gray/bl.gif'); background-position:bottom left;}

<!−− отступы и прочее на стиле с текстом, при желании можно еще слой вставить
.round-gray .bl {padding:10px 20px;}

HTML

1
2
3
4
5
6
7
8
9
<div class="round-gray">
<div class="tl">
<div class="tr">
<div class="br">
<div class="bl">DIV с закругленными углами очень легко сделать при помощи CSS.</div>
</div>
</div>
</div>
</div>

Результат

Если все сделано правильно, на экране появится такой прямоугольник:
DIV с закругленными углами

Смотреть пример онлайн

Углы

Цвет фона: #DDDDDD;

top left — http://expange.ru/i/round/gray/tl.gif (верхний левый)

top left — http://expange.ru/i/round/gray/tr.gif (верхний правый)

top left — http://expange.ru/i/round/gray/bl.gif (нижний левый)

top left — http://expange.ru/i/round/gray/br.gif (нижний правый)

Скачать углы одним архивом.

Опубликовано: 02 мая 2011  ·  Автор: Артём Фёдоров  ·  3640 просмотров

Категория

ГлавнаяВеб-дизайнHTMLВерсткаdiv с закругленными углами

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

Верстка, HTML, Веб-дизайн

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания