Закругленные уголки — еще один способ.

22 Октябрь 2008, zmei

Еще один способ закругленных уголков.

Возвращаясь к статье Закругленные и круглые кнопки в HTML вспомнил свои наработки п осозданию HTML-CSS блоков с закругленными уголками.

Структура состоит из трех элементов списка li, верхний и нижний содержат «прижатое» к правому краю бэкграундовое изображение (верхний и нижний правые уголки, выделены — зеленым) и тег img «прижатый» к левому краю (верхний и нижний левые уголки, выделены — красным). Между ними li с основным контентом.

Преимущества: данного способа заключается в понятной HTML структуре, возможность неограниченного «растягивания» по высоте и ширине.

Недостатки: не семантичная структура (впрочем для полного решения данной задачи ее пока не существует и невозможность использования спрайтов, т.е. четыре изображения — четыре запроса на сервер.

Скачать пример

HTML

<ul class="corners">
   <li class="head"><img src="img/tl.jpg" alt="corner-top-left" /></li>
   <li class="content">
        Текст текст текст текст текст текст текст
        текст текст текст текст текст текст текст
        текст текст текст текст текст текст текст
   </li>
   <li class="foo"><img src="img/bl.jpg" alt="corner-bottom-left" /></li>
</ul>

CSS

.corners {
        width:300px;
}
.corners, .corners li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.corners li {
	vertical-align: baseline;
}

.corners .head, .corners .foo  {
	line-height: 0px;
	font-size: 0px;
	height: 6px;
}

.corners .head {
	background: url(img/tr.jpg) right top no-repeat #EEEEEE;
}

.corners .foo {
	background: url(img/br.jpg) right bottom no-repeat #EEEEEE;

}

.corners .content {
	background-color: #EEEEEE;
	font: normal 11px/12px Tahoma, serif, sans-serif, monospace;
	padding: 12px 18px;
}

Источник.