Соединие DIV и Заливание CSS Фигур Фоном

[barrudo]

Здравствуйте Друзья!)

Есть дизайн, я заверстал его блоками.

http://myscreenshot.info/i/0005/450771420815068249968785663668.png

Вопросы:

 

1. Как теперь соединить ряд блоков в один DIV, (наподобие псевтотегов чтоли)?

2. Как залить получившейся DIV фоном?

 

Я точно знаю что такое можно сделать))

Пример моего кода (фигура слева) http://myscreenshot.info/i/0005/263841420815915808621868304315.png

HTML:

 <div id="imgbox_canvas">

   <div id="im_tri-right"></div>

   <div id="im_tri-top"></div>

   <div id="c_row_r">

   <div id="im_tri-left"></div>

   <div id="im_centr"></div>

   <div id="im_btm-r"></div>

   <div id="im_btm-l"></div>

    </div>

 </div>

 

CSS:

/* ФИГУРА ИМЕДЖ БОКС*/

 

#imgbox_canvas {

margin-left: 15px;

position: relative;

display: inline-block;

width: 170px;

height: 170px;

float:left;

 

}

 

#im_tri-top { 

display:inline-block;

float:right;

position: relative;

width: 0; 

height: 0; 

border-bottom: 10px solid #86BFD9; 

border-left: 150px solid transparent; 

z-index: 6;

}

 

#im_tri-right {

display:inline-block;

position: relative;

float:right;

width: 0;

height: 0;

border-top: 145px solid #86BFD9;

border-right: 20px solid transparent;

}

 

#im_tri-left {

display:inline-block;

position: relative;

float:left;

width: 0;

height: 0;

border-top: 135px solid #86BFD9;

border-left: 20px solid transparent;

}

 

#im_centr {

display:inline-block;

position: relative;

float:left;

width: 130px;

height: 135px;

background-color: #86BFD9;

}

 

#im_btm-l {

display:inline-block;

position: relative;

float:right;

width: 0;

height: 0;

border-top: 15px solid #86BFD9;

border-left: 65px solid transparent;

}

 

#im_btm-r {

display:inline-block;

position: relative;

float:right;

width: 0;

height: 0;

border-top: 15px solid #86BFD9;

border-right: 65px solid transparent;

}

 

====================================

 

Я правильно понимаю, что всю это модель фигуры можно вывести в HTML одним DIVом? КАК?))

и Залифть фотом, включая BORDER?

Не мовсем получилось сделать тоже с примером из сети...

/*test*/

#infinity {

    position: relative;

    width: 212px;

    height: 100px;

}

 

#infinity:before,

#infinity:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 60px;

    height: 60px;

    border: 20px solid #4880C5;

background:url(more_sunflowers_by_Dieffi.jpg);

background-repeat: no-repeat;

background-clip: padding-box;

 

    -moz-border-radius: 50px 50px 0 50px;

         border-radius: 50px 50px 0 50px;

    -webkit-transform: rotate(-45deg);

       -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

}

#infinity:after {

    left: auto;

    right: 0;

    -moz-border-radius: 50px 50px 50px 0;

         border-radius: 50px 50px 50px 0;

    -webkit-transform: rotate(45deg);

       -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

         -o-transform: rotate(45deg);

            transform: rotate(45deg);

}

 

Но непонятная мне технлогия как соединены два элемента и

как залить border, в сети по крайней мере пишут что возможно...

 

 

 

[psywalker]

А зачем нужны такие заморочки с вложенностью 10-и div'ов для одной фигуры? Я бы сделал либо один div -- одна картинка, либо на svg фигуры.

 

Кстати, почитайте правила оформления постов на форуме.

[barrudo]

А зачем нужны такие заморочки с вложенностью 10-и div'ов для одной фигуры? Я бы сделал либо один div -- одна картинка, либо на svg фигуры.

 

Кстати, почитайте правила оформления постов на форуме.

 

Так вот я и задал вопрос, как сделать один DIV и залить его картинкой?) Ответьте пожалуйста!)

[psywalker]

 

А зачем нужны такие заморочки с вложенностью 10-и div'ов для одной фигуры? Я бы сделал либо один div -- одна картинка, либо на svg фигуры.

 

Кстати, почитайте правила оформления постов на форуме.

 

Так вот я и задал вопрос, как сделать один DIV и залить его картинкой?) Ответьте пожалуйста!)

 

Эм... background:url(тут адрес картинки для элемента);, не?

[barrudo]

 

 

А зачем нужны такие заморочки с вложенностью 10-и div'ов для одной фигуры? Я бы сделал либо один div -- одна картинка, либо на svg фигуры.

 

Кстати, почитайте правила оформления постов на форуме.

 

Так вот я и задал вопрос, как сделать один DIV и залить его картинкой?) Ответьте пожалуйста!)

 

Эм... background:url(тут адрес картинки для элемента);, не?

 

Так как сделать один DIV из 10?

[psywalker]

 

 

 

А зачем нужны такие заморочки с вложенностью 10-и div'ов для одной фигуры? Я бы сделал либо один div -- одна картинка, либо на svg фигуры.

 

Кстати, почитайте правила оформления постов на форуме.

 

Так вот я и задал вопрос, как сделать один DIV и залить его картинкой?) Ответьте пожалуйста!)

 

Эм... background:url(тут адрес картинки для элемента);, не?

 

Так как сделать один DIV из 10?

 

А зачем делать один из десяти? Вот на нижнем скрине 3 картинки, так? Вот значит нужно 3 div'а. Для каждой картинки один.

 

[barrudo]

Я не делаю картинки, весь интерес заверстать в DIV ))

и на скриншоте экрана как раз таки DIV.

ладно. спасибо.