Открыть меню    

Закругленный блок средствами CSS. Используем изображения.

Создадим четыре изображения закругленных уголков. Этого мы добьемся, разбив круг на четыре части.

четвертинка 1 четвертинка 2
четвертинка 3 четвертинка 4

Создадим общий блок для всех элементов. Для него зададим цвет фона, совпадающий с цветом закругленных уголков.

В общем блоке создадим еще 2 блока. Изображения левого нижнего и левого верхнего уголка расположим как картинки. Изображения правого верхнего и правого нижнего уголка расположим в блоках, как фоновые, задав им соответствующие стилевые правила.

В результате мы получим визуально закругленный блок средствами CSS.

HTML

<div class="block1">
<div class="block2" > 
<img src="krug_lefttop.png" width="100"  height="100" />
</div  >  
<p align="center"> Здесь также можно вставить блок  </p>
<div class="block3" >
<img src="krug_leftbot.png" width="100"  height="100" />
</div> 
</div>

CSS

.block1 {
	width: 400px;
	background-color:#D82424;
}
.block2 {
	background-image: url(krug_righttop.png);
	background-repeat: no-repeat;
	background-position: right top;
}
.block3 {
	background-image: url(krug_rightbot.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}

В результате мы получим:

закругленный блок с помощью CSS

Комментарии к статье