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

Goldie · March 27, 2011

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

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

Edited March 27, 2011 by Goldie

sigma77 · March 27, 2011

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


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

Goldie · March 27, 2011

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

sigma77 · March 27, 2011

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

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

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

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

swetlana · March 27, 2011

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

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

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

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

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

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

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

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

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

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

Goldie · March 28, 2011

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

<!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 поставить.

Goldie · March 28, 2011

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

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

Gvager · October 31, 2011

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

Дело в том, что CSS3 поддерживается лишь в 9 IE.
На Windows XP больше восьмой версии не установить.
Следовательно большая часть людей, до сих пор сидящая на XP будут иметь проблемы с CSS3 (если конечно не установят нормальный браузер).
Тут надо сделать выбор: идти в ногу со временем и использовать новые технологии HTML5+ и CSS3+ либо подстраиваться под клиентов, которые и не собираются "обновляться".

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

belash911 · October 31, 2011

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>

(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 к примеру красный потом идёт див зелёный а потом твой див синий, (уголки естественно с внешней стороны тоже должны быть зелёными, а внутри прозрачными) то в ИЕ (низких версий) прозрачный цвет залётся цветом боди тоесть красным )

Sign In

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

Question

Goldie

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

Goldie

Link to comment

Share on other sites

Gvager

Link to comment

Share on other sites

belash911

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information