Блок с закругленными углами с изображением

[malsyst]

Доброго времени суток. Подскажите, пожалуйста, как лучше сверстать вот такой блок

Получилось 8 маленьких кусочков, которые нужно слепить в один блок на div

Получается что-то подобное:

<div class="класс">
            <div>
            <div>
            <div>
            <div>
            <div>
            <div>
            <div>
            Содержимое блока
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
</div>


.класс  { 
background : url(1 картинка) top center repeat-x scroll #fff; 
 } 
 .класс div  { 
background : url(2 картинка) center right repeat-y scroll transparent; 
 } 
 .класс div div  { 
background : url(3 картинка) bottom center repeat-x scroll transparent; 
 } 
 .класс div div div  { 
background : url(4 картинка) center left repeat-y scroll transparent; 
 } 
 .класс div div div div  { 
background : url(5 картинка) top left no-repeat scroll transparent; 
 } 
 .класс div div div div div  { 
background : url(6 картинка) top right no-repeat scroll transparent; 
 } 
 .класс div div div div div div  { 
background : url(7 картинка) bottom right no-repeat scroll transparent; 
 } 
 .класс div div div div div div div  { 
background : url(8 картинка) bottom left no-repeat scroll transparent; 
 } 
 .класс div div div div div div div div  { 
background : none;  
}

Можно ли сделать такой блок иначе… Чтобы код был короче… На сайте блоков должно быть много и иконка слева вверху у каждого блока разная?

[USF]

<div>

<div>

<div>

<div>

<div>

<div>

<div>

Содержимое блока

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

господи иисусе

http://jsfiddle.net/DTZMz/7/ - но это вариант для современных браузеров. верхнюю плашку можно приладить кучей способов - как фоном верхнего блока, так и relative элементом

[malsyst]

<div>

<div>

<div>

<div>

<div>

<div>

<div>

Содержимое блока

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

господи иисусе

http://jsfiddle.net/DTZMz/7/ - но это вариант для современных браузеров. верхнюю плашку можно приладить кучей способов - как фоном верхнего блока, так и relative элементом

Спасибо, огромное. Но как быть с Ишаком?

[ceil100]

Забей

[USF]

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

[malsyst]

Забей

Да, CSS3 рулит

[Aleksey19881988]

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

:D

вполне вероятно