Закругленные уголки

[qazibum]

Делаю сайт и нужно сделать закругленные уголки с прозрачными углами.
Вот так (из фотошопа)
Для просмотра ссылки Войди или Зарегистрируйся
код вот такой

<div id="левый_бок">
<div id="правый_бок">
<div id="верх_середина">
<div id="левый_угол">
<div id="правый_угол">
</div></div></div><div></div>
...

Проблема в том, что левый и правый бок получаются под углами (снизу), но из-за прозрачности углов бока видно. Не получается закругленности.
С верх_середина я решил - задал ширину. А с боками не получится, потому что высота будет меняться.
Подскажите простое решение? Как такое делается?
Нужны именно прозрачные уголки, потому что фон с узором и там сложно будет подгонять.

 

[Phoenix168]

Попробуй так:

<div id="corners">
    <div id="tl"></div>
    <div id="tr"></div>
    <div id="br"></div>
    <div id="bl"></div>
    <div>Содержимое блока</div>
</div>

div#corners {position:relative;}
div#tl {background:transparent url(../images/corner.gif) no-repeat scroll 0 0; left:-1px; top:-1px;}
div#tr {background:transparent url(../images/corner.gif) no-repeat scroll 100% 0; right:-1px; top:-1px;}
div#bl {background:transparent url(../images/corner.gif) no-repeat scroll 0 100%; bottom:-1px; left:-1px;}
div#br {background:transparent url(../images/corner.gif) no-repeat scroll 100% 100%; bottom:-1px; right:-1px;}

 

[vs83]

а если сделать "левый бок" и "правый бок" высотой всего в 1 пиксел? Тогда ничего не заметно будет, во-первых, и во-вторых, даже скорее всего выпирать ничего сверху не должно, так как там всего 1 пиксел и выпирать в прзрачный угол просто нечему.

 

[The Finn]

Phoenix168, неверно.

qazibum, какие размеры у уголков? И дайте пример всего блока, где они будут применяться, тогда я смогу написать вам правильный код.

Вам нужно просто раскроить в фотошопе уголки, а потом собрать из них блок, либо расставить в нужных местах существующего.

Вариант с прозрачным бекграундом, как написал господин Phoenix168, не прокатит.

 

[qazibum]

The Finn, размеры примерно 50 на 50 px.
Весь блок выглядит так

<div id="левый_бок">
<div id="правый_бок">
<div id="верх_середина">
<div id="левый_угол">
<div id="правый_угол">
<содержимое блока>
</div></div></div>
<div id="низ_середина">
<div id="левый_угол_нижний">
<div id="правый_угол_нижний">
</div></div></div>
<div></div>

css'ом выравниваются и бекграндятся.
Я нашел решение - убрал левые бока, а верхние уголки сделал длинными. Они дотягиваются до нижних и прячутся под ними.
Еще пришлось низ_середина убрать и сделать левый_угол_нижний широким, чтобы дотягивался до правый_угол_нижний. Он почему-то не хотел ограничиваться max-width: и маргиниться от левого края, как я сделал с верх_середина.
Хотелось бы красивее решить задачу, но нет времени
Спасибо за советы.

 

[trafalgar]

думаю, что пригодится:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[General Fizz]

Картинки и Яваскрипт для уголков - зло, можно обойтись только средствами CSS.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[valconq]

Поддерживаю, картинки уже не модно. У меня это ассоциируется с табличной версткой.

 

[mdss]

Поддерживаю, картинки уже не модно. У меня это ассоциируется с табличной версткой.

странные ассоциации ... Градиенты тоже с табличной верстой ассоцирируются? А логотипы? Счетчик посещений явный признак табличной верстки! Сейчас модно его делать на css only

 

[Hi-tech]

38 статей по скруглению уголков:
Для просмотра ссылки Войди или Зарегистрируйся