Jump to content
  • 0

Пара скругленных углов


Goldie
 Share

Question

Уважаемые, подскажите как сделать выборочное скругление углов у блока? А именно верхний левый угол и нижний правый. Я решения пока не нашел. Буду крайне признателен за информацию.

Блок должен быть фиксированным по ширине и тянуться по высоте.

Edited by Goldie
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Уважаемые, подскажите как сделать выборочное скругление углов у блока? А именно верхний левый угол и нижний правый. Я решения пока не нашел. Буду крайне признателен за информацию.

Блок должен быть фиксированным по ширине и тянуться по высоте.


div {
border-radius: 10px 0;
width: 500px;
background: silver;
}

  • Like 1
Link to comment
Share on other sites

  • 0

Проблема этого решения в том что не все браузеры поддерживают CSS 3

1) это не проблема.

2) в условии про это ничего не сказано.

3) берете любое другое решение и просто не применяете закругленные уголки для ненужных углов.

Link to comment
Share on other sites

  • 0

Проблема этого решения в том что не все браузеры поддерживают CSS 3

речь конкретно о свойстве border-radius?

Вебкитные поддерживают давно.

Опера хоть и недавно, но поддерживает.

ФФ до недавних пор поддерживал с вендорным префиксом, теперь же поддерживает натурально само свойство.

Даже IE теперь поддерживает.

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

Нужна ли поддержка архаизмов — вам решать, но например есть такое решение как PIE. Есть и всякие извраты с фоновыми картинками.

Какие ещё браузеры?

Может вы переживаете, что Lynx не поддерживает это свойство?

Link to comment
Share on other sites

  • 0

Нашел такое решение:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Из опыта создания блока с закругленными углами. Применение блочных элементов списка определений.</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.formbox {
background: url(forma.png) no-repeat left top;
width: 60%;
padding-left: 30px;
font: 12px Arial, Helvetica, sans-serif;

}
.formbox dl {
background: #FFECDF url(forma.png) no-repeat right top;

}
.formbox dt {
padding-top: 20px;
}
.formbox h1 {
font-size: 16px;
padding-bottom: 10px;
}
.formbox dd {
padding-right: 20px;
background: url(forma.png) no-repeat right bottom;

}
.formbox .bot {
background: url(forma.png) no-repeat left bottom;
margin-left: -30px;
height: 25px;
margin-right: 10px;
padding-bottom: 5px;
}
.formbox p {
padding-bottom: 10px;
}
</style>

</head>

<body>

<div class="formbox">
<dl><dt><h1>Закругленные углы</h1>
<dd><p>У всеобщей любви к закругленным углам есть причина, они улучшают читабельность
и упрощают восприятие информации. Закругленные углы используются многими новыми
сайтами. Все больше элементов страницы становятся закругленными — меню, кнопки,
поля ввода, таблицы и колонки текста.</p>
<p>Типичными примерами использования закругленных углов могут быть <a href="http://www.ioutliner.com/">Ioutliner</a>,
<a href="http://www.netsquared.org/">Netsquared</a> и <a href="http://www.springdoo.com/">Springdoo</a>.</p>

<p class="bot"></p>

</dl>
</div>
</body>
</html>

Картинка для скачивания: тунц

Не могу разобраться с отступами. На картинке скруглены верхний правый и левый нижние углы на 30px.

Требуется помощь. Фактически нужно правильные отступы в CSS поставить.

Link to comment
Share on other sites

  • 0
речь конкретно о свойстве border-radius?

Вы много сайтов встречаете, на которых блоки сверстаны таким образом? Я не встречал, везде идет верстка либо за счет фоновых картинок, либо с использованием дивов.

Link to comment
Share on other sites

  • 0

Проблема этого решения в том что не все браузеры поддерживают CSS3

Дело в том, что CSS3 поддерживается лишь в 9 IE.

На Windows XP больше восьмой версии не установить.

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

Тут надо сделать выбор: идти в ногу со временем и использовать новые технологии HTML5+ и CSS3+ либо подстраиваться под клиентов, которые и не собираются "обновляться". <_<

А по теме PIE хорошо справляется лишь с закруглением всех углов, а не конкретных. Так что верно лишь использование картинок... Либо 1 картинка сверху блока с закруглёнными углами, либо 2 картинки углов на нужных местах.

Link to comment
Share on other sites

  • 0

1.Бери в фотошопе рисуй скругленый уголок внешний цвет делай как у сайта а внутри делай прозрачный (поищи в нете как сделать закруглённые уголки)сохраняй в .png присвой имя к примеру corner_top_left.png скопируй каритнку и разверни чтобы получился нижний угол и переименуй corner_bottom_right.png

2. К блоку которому нужно вставить уголки премени свойство "бекграунда" с нужным тебе цветом и "урел" картинки (corner_bottom_right.png) без повторения и позиционрования картинки по нижнему левому краю, Вуаля нижний уголок есть и в 6 ИЕ.

<div>

(css)=> background: #fc0 url('corner_bottom_right.png') repeat-y;

background-position: right bottom;

</div>

3. Верхний уголок - просто добавь еще один див с картинкой corner_top_left.png в твой блок и при помощи позиционирования перемести в верх и влево

<div>

<div><img src="corner_top_left.png">

(css)=> position: absolute;

left:-1px;(к примеру)

top:-1px; (к примеру)

</div>

(css)=> background: #fc0 url('corner_bottom_right.png') repeat-y;

background-position: right bottom;

</div>

Ну вродь должно получится ток есть одна проблемка в ИЕ в низких версиях (они прозрачный фон делают не цветом родителя а цветом который назначен body, то есть если цвет body к примеру красный потом идёт див зелёный а потом твой див синий, (уголки естественно с внешней стороны тоже должны быть зелёными, а внутри прозрачными) то в ИЕ (низких версий) прозрачный цвет залётся цветом боди тоесть красным )

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy