Скругленные углы заданные в процентах у прямогульной кнопки

[Cypher76]

Доброго времени суток, уважаемые форумчане.

Имеется обычная прямоугольная кнопка, допустим div. Кнопка может менять ширину, но не высоту. Требуется скруглить ей углы, но задать значения в процентах. Пишу следующий код:

div {
 ...
 width: 50%;
 height 80px;
 border-radius: 5%;
 ...
}

Радиус скругления по горизонтали получаю 5% от нефиксированной ширины кнопки, а по вертикали 5% от фиксированной высоты. Скругление получается овальное, а надо круглое, зависящее только от ширины.

В описании свойства border-radius в справочнике по CSS сказанно:

В случае применения процентов, отсчет ведется относительно ширины блока.

Как раз то, что мне нужно! Но, судя по всему, это не так. Получается, что:

В случае применения процентов, отсчет горизонтального радиуса скругления ведется от ширины, а вертикального от высоты.

Скажите, пожалуйста, в чем я мог ошибиться в понимании, и что мне стоит попробовать сделать, чтобы добиться желаемого результата?

Возможно ли решить задачу средствами CSS?

[alexandr_v-vich]

Cypher76, как я понял, в определённый момент расширения экрана у вас должен получиться круг. И расширяя далее сколь угодно, у вас так и будет оставаться круг, так?

Вопрос к вам — когда это должно наступить?

Возможно ли решить задачу средствами CSS?

Если как я написал, то скорее всего нет.

[alexandr_v-vich]

А, ну не) У самого с воображением бывает туго))

Вы, если хотите одинаковое скругление, то оно должно браться от меньшего, в вашем случае чаще от высоты. И это:

надо круглое, зависящее только от ширины

впринципе работать не может. Или оно круглое/ровное, зависящее от меньшей стороны или от большей, но неровное…

[Cypher76]

Если мы задаем

border-radius: n%;

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

Люботным и кому не лень, попробуйте код.

<style>
	div {
		margin: 200px auto;
		text-align: center;
		background: black;
		color: white;

		/*work with*/		
		width: 50%;
		height: 200px;
		border-radius: 20%;
	}
</style>

<div>Hello</div>

Хороший вариант, это задать значения через слэш, например:

border-radius: 10% / 20%;

Но это подходит только для случая, когда ширина изменяется пропорционально высоте (в примере 2 к 1). У меня высота не изменяется.

Александр, я думаю, что в конечном итоге врядли получится указать border-radius`у, от чего считать проценты. И, если задуматься, дефолтовый способ высчитывать в процентах значения от высоты и ширины, вполне естественный. Мне он кажется просто непривычным, так как обычно нужно использовать px или em, а они ведут себя по другому.

Я попробую решить задачу использованием media queries. На различных интервалах разрешения буду задавать разный радиус скругления в пикселя. Или, если надо будет увеличивать шрифт на тех же интервалах, то в em`ах, чтобы прописать один раз.

Edited May 12, 2012 by Cypher76

[alexandr_v-vich]

Cypher76, ну, если рассматривать, что ширина у вас всегда меньше высоты, то у вас максимальный радиус будет равен высоте блока. Ну, минимальный какой хотите.

Допустим, если поставим минимальный нулю, при „квадрате“, и увеличивать радиус, при каждом увеличении ширины, то можно так — http://jsfiddle.net/yPAjD/5/.

А с CSS тут точно нет.

И лучше, по-моему js, нежели media queries. Тем более его тут совсем немного.

Edited May 12, 2012 by alexandr_v-vich

[Softlink]

Такой вариант подойдет - http://jsfiddle.net/Softlink/NsHEv/ ?

[alexandr_v-vich]

Softlink, так у тебя фиксированный радиус, он не меняется с увеличением ширины блока… надо чтобы он тоже увеличивался. Ну я так понял)

[Softlink]

Softlink, так у тебя фиксированный радиус, он не меняется с увеличением ширины блока… надо чтобы он тоже увеличивался. Ну я так понял)

не, по-моему, это я не так понял) И конструкция моя бессмысленна, запарился))

Edited May 12, 2012 by Softlink

[SelenIT]

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

[Cypher76]

Ого! Вот это капнули

Спасибо большое.

С before и after хорошо получается.

Попробую в таком виде прикрутить.

[SelenIT]

Вдогонку еще вариация на тему

[alexandr_v-vich]

Да уж…)

SelenIT, по твоим решениям хоть учебники пиши)))

Кстати, для последнего — исправьте для псевдоэлементов

padding: 50%;

на

padding: 50% 0;
width: 100%;

Иначе вылетает иногда по ширине сам блок, т.е. кусок его порой видным становится справа…

[SelenIT]

alexandr_v-vich, в каком браузере такое бывает? Впрочем, поправка логичная и дельная в любом случае.

[alexandr_v-vich]

в каком браузере такое бывает?

Opera, Safari, Chrome.

[SelenIT]

Мда, есть такое. Я-то просто как раз в FF экспериментировал, а в остальных только бегло проверил