Закругленный блок средствами CSS. Используем изображения.
Создадим четыре изображения закругленных уголков. Этого мы добьемся, разбив круг на четыре части.
Создадим общий блок для всех элементов. Для него зададим цвет фона, совпадающий с цветом закругленных уголков.
В общем блоке создадим еще 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;
}
В результате мы получим:
Комментарии к статье