megafon4u.ru

Довольно часто на страницах приходится строить блоки, которые должны иметь прозрачные уголки, тянуться по горизонтали и вертикали и иметь графические границы. В сети описано очень много способов, но красивого решения я так и не увидел. Поэтому хочу предложить свое. Суть его в том, что левая и правая стороны позиционируются с помощью отрицательных маргинов, а верхняя и нижняя - с помощью относительного позиционирования. Уголочки расставляются float'ами.
HTML

<div class="block">
  <span class="up-r"></span>
  <span class="up-l"></span>
    <div class="side-left">
      <div class="side-right">
        <div class="side-up">
          <div class="side-bottom">
            <div class="box">
              <h2>Тело блока</h2>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  <span class="bottom-r"></span>
  <span class="bottom-l"></span>
</div>

CSS

/* reset */
p, h2, div, span{padding:0;margin:0}
/*  */
body{ background: url(img/main-fon.gif) 0 0 repeat; }
.block{ position:relative; margin:10px 0 15px;}
.box{ position:relative;top:-10px}
/* sides */
.side-left{ background:url(img/w-v-l.gif) 0 0 repeat-y #fff;margin-right:10px;padding-left:10px}
.side-right{ background:url(img/w-v-r.gif) right 0 repeat-y;margin-right:-10px;padding-right:10px}
.side-up{ background:url(img/bw-up.gif) 0 0 repeat-x; position:relative;top:-10px}
.side-bottom{ background:url(img/w-down.gif) 0 bottom repeat-x;position:relative;top:15px}
/* corners */
.up-l{background:url(img/bw-up-l.gif) 0 0 no-repeat;height:68px;width:10px;float:left;margin-top:-10px}
.up-r{ background:url(img/bw-up-r.gif) right 0 no-repeat;height:68px;width:10px;float:right;margin-top:-10px}
.bottom-l{background:url(img/w-down-l.gif) 0 bottom no-repeat;width:10px;height:6px;margin-top:-1px;float:left}
.bottom-r{background:url(img/w-down-r.gif) right bottom no-repeat;width:10px;height:6px;margin-top:-1px;float:right}
/* fix-ie */
.up-l, .up-r, .bottom-l, .bottom-r{font-size:1px;position:relative}

Есть соблазн сократить код на 1 div и переместить уголки внутрь блока и разметить их с помощью абсолютного позиционирования. Однако это решение не кроссбраузерное, так как уголки в ие6 будут гулять на 1 пиксель при разных разрешениях, поэтому только float'ами. Конечно же, под свои блоки придется несколько изменить CSS, тогда как HTML трогать не нужно. К плюсам метода могу отнести возможность темизации всех сторон и уголков блока с помощью изображений. К минусам - большое количество div'ов.
Самое главное - это вариант построения блока является валидным и кроссбраузерным, а также испытан мной во многих проектах.