как сделать 4 уголка у слоя

[hitenok]

Подскажите, как можно сделать 4 скоса у прямоугольного текстового блока наиболее эффективным способом. (т.е. добавить картинки в каждый из углов). получается примерно следующее, только слишком громоздко:

 
 <td style="vertical-align: top; padding-bottom: 30px; background: #f7eedc;">
 <div style="background: #f9e8d4 url(/images/center_top_fon.jpg) repeat-x top; height: 36px;"><img src="/images/center_top_left.jpg" align="left" alt="" /><img src="/images/center_top_right.jpg" align="right" alt="" /></div>
 <div style="background: #f9e8d4 url(/images/center_left_fon.jpg) repeat-y;">
 <div style="background: transparent url(/images/center_right_fon.jpg) repeat-y right;">
 <div style="padding: 40px 74px;">text</div>
 </div>
 </div>
 <div style="background: #f9e8d4 url(/images/center_bottom_fon.jpg) repeat-x bottom; height: 36px;"><img src="/images/center_bottom_left.jpg" align="left" alt="" /><img src="/images/center_bottom_right.jpg" align="right" alt="" /></div>
 </td>

[Storm]

Не знаю как это принято делать, но я делаю следующим образом:

во внешний блок с position:relative вписываю 4 блока с position:absolute и выставляю каждому нужное значение top, bottom, right, left.

[hitenok]

т.е. фактически тоже самое только через position. А по элегантнее?

[Storm]

Написать javascript функцию, которая сама будет вставлять уголки.

[Emm]

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

данный вопрос обсуждался многократно, поюзай ка поиск по форуму.

[homm]

т.е. фактически тоже самое только через position. А по элегантнее?

Куда элегантнее то?

<div id="type" class="clearfix">


<img src="/itech/corner1.gif" alt="#" id="corner1" />
<img src="/itech/corner2.gif" alt="#" id="corner2" />
<img src="/itech/corner3.gif" alt="#" id="corner3" />
<img src="/itech/corner4.gif" alt="#" id="corner4" />
</div>

[Emm]

Куда элегантнее то?

в таком случае, если картинки отключены, то некоторые браузеры покажут Г, поэтому, нужно юзать div и background, имхо.

[homm]

Куда элегантнее то?

в таком случае, если картинки отключены, то некоторые браузеры покажут Г, поэтому, нужно юзать div и background, имхо.

В таком случае если картинки обключены, браузеры покажут рамку без закруглений. Где проблема то?

Юзая div и background видимо брузеры принудительно загрузят картинки?

[hitenok]

homm, я не правильно понял, думал, что для каждого угла свой див подразумевался, спасибо, это гораздо рациональнее.

[zascia]

Есть готовый яваскрипт вот тут http://www.html.it/articoli/nifty/index.html

Там на английском, но по примерам можно сориентироваться как применять, сложного нет ничего. Можно скриптом делать 1, 2, 3, 4 уголочка, задавать радиус скругления ) Есть ограничение: если у блока с фоном присутствует бордер другого цвета, такая конструкция не применяется ( (или не знаю как можно применить)

[Dimitry Wolotko]

Зачем делать через JS, если можно обойтись стилями?

[Emm]

http://designformasters.info/posts/round-corners-no-image/

комменты тоже нужно читать.

[kiD]

как вариант закругления кра?в блока... но можно переделать и под "скосы"

div.crcl {
 display: block;
 width: 110px;
 margin: 10px auto;
 background: #FFC29E;
 color: #8B0000; 
}

b.rtop, b.rbottom {
 display:block;
 background: #fff;
}

b.rtop b, b.rbottom b {
 display:block;
 height: 1px;
 background: #FFC29E;
}
b.r1 {
 margin: 0 5px;
}
b.r2 {
 margin: 0 3px;
}
b.r3 {
 margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4 {
 margin: 0 1px;
 height: 2px;
}

<div class="crcl">
 <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>


 <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

[Dimitry Wolotko]

Какие люди )

[kiD]

2 Dimitry Wolotko прикинь)

относительно уголков - http://htmlbook.ru/content/?id=106