Search the Community

Здравствуйте Друзья!) Есть дизайн, я заверстал его блоками. 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, в сети по крайней мере пишут что возможно...