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

Статус
В этой теме нельзя размещать новые ответы.

qazibum

Старатель
Регистрация
21 Окт 2009
Сообщения
200
Реакции
10
Делаю сайт и нужно сделать закругленные уголки с прозрачными углами.
Вот так (из фотошопа)
Для просмотра ссылки Войди или Зарегистрируйся
код вот такой
Код:
<div id="левый_бок">
<div id="правый_бок">
<div id="верх_середина">
<div id="левый_угол">
<div id="правый_угол">
</div></div></div><div></div>
...
Проблема в том, что левый и правый бок получаются под углами (снизу), но из-за прозрачности углов бока видно. Не получается закругленности.
С верх_середина я решил - задал ширину. А с боками не получится, потому что высота будет меняться.
Подскажите простое решение? Как такое делается?
Нужны именно прозрачные уголки, потому что фон с узором и там сложно будет подгонять.
 
Попробуй так:
HTML:
<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;}
 
а если сделать "левый бок" и "правый бок" высотой всего в 1 пиксел? Тогда ничего не заметно будет, во-первых, и во-вторых, даже скорее всего выпирать ничего сверху не должно, так как там всего 1 пиксел и выпирать в прзрачный угол просто нечему.
 
Phoenix168, неверно.

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

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

Вариант с прозрачным бекграундом, как написал господин Phoenix168, не прокатит.
 
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: и маргиниться от левого края, как я сделал с верх_середина.
Хотелось бы красивее решить задачу, но нет времени :)
Спасибо за советы.
 
Картинки и Яваскрипт для уголков - зло, можно обойтись только средствами CSS.

 
  • Нравится
Реакции: UDAV
Поддерживаю, картинки уже не модно. У меня это ассоциируется с табличной версткой.
 
Поддерживаю, картинки уже не модно. У меня это ассоциируется с табличной версткой.
странные ассоциации ... Градиенты тоже с табличной верстой ассоцирируются? А логотипы? Счетчик посещений явный признак табличной верстки! Сейчас модно его делать на css only
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху