Как сделать идеальное динамическое скругление краев?

Question

[PHP-GOD]

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

Допустим у меня есть input и мне нужно его заверстать таким вот образом:


Вроде бы легко:
.mystyle{ border-radius: 100px; }

Но такие идеально круглые края будут только в случае если элемент имеет высоту 200px, если изменить ее на 300px, края уже будут не такими идеально круглыми. Собственно, как сделать, чтобы под каждую высоту мне не нужно было писать стиль с определенным border-radius? Я пробовал написать вместо пикселей проценты, но тогда получалось даже близко не то, что мне нужно.

Всем спасибо.

Comments

[Rustam Bainazarov]

Поставьте 1000px или ещё больше.

[PHP-GOD]

Рустам Байназаров, да был вариант просто написать 9999999px, но ведь наверное можно как-то "по нормальному".

[Rustam Bainazarov]

PHP-GOD, нет, иначе нельзя. Это нормальный вариант, который используется везде, только миллионы пикселей выставлять не нужно.

[Rustam Bainazarov]

PHP-GOD, так работает CSS и закругление углов: https://stackoverflow.com/questions/29966499/borde...

[Сергей delphinpro]

PHP-GOD, Это и есть "по-нормальному" в текущей реализации CSS

Answer 1

[Алексей Ярков]

%

Comments

[PHP-GOD]

Да понятно что %, но каким образом %, если написать как border-radius: 50% вылезает вот такая дичь:

[Saboteur]

50% -> 5%?

[PHP-GOD]

Saboteur, закругление процентами почему-то всегда начинается с центра элемента, а не именно его краев. Проще говоря хоть какая комбинация процентов не дает нужный результат.

Answer 2

[Ankhena]

Через em
https://jsfiddle.net/L3cuw27v/

Comments

[PHP-GOD]

Да вот что-то не заметно, я всего лишь прописал другую высоту и закругление не изменилось: https://jsfiddle.net/0hqdejzo/

[Ankhena]

PHP-GOD, так регулируйте высоту через line-height.
В любом случае задавать высоту в точках не лучшая практика.

[PHP-GOD]

Ankhena, какая разница через что ее регулировать, если закругление не изменяется? https://jsfiddle.net/rpm12gv8/3/

[Ankhena]

PHP-GOD, через переменную или кастомное свойство
https://jsfiddle.net/w63e47zk/

Естественно, при этом ширина инпута должна быть больше высоты.

Если вы будете line-height задавать в px, то, конечно, ничего не выйдет. Очень редко, когда имеет смысл делать это в px.

[Ankhena]

PHP-GOD, https://jsfiddle.net/q7s4bfpa/

[PHP-GOD]

Ankhena, это конечно да, но мне кажется не лучшее решение.

[Ankhena]

PHP-GOD, можно тоже самое и через height, но повторю, что фикс высота не очень хорошо.
Или можете считать на js

Answer 3

[Lenskii]

Проценты высчитывай
В твоем случае это 25, удачи :3

Comments

[PHP-GOD]

Нет, это и не 25, это и не 50, и не 100. Я перепробовал разные комбинации, оно закругляет не так, как мне нужно.

Answer 4

[Saboteur]

Если ширина не меняется, а только высота, то border-radius:18%/50px
https://jsfiddle.net/q8u4kvay/

Answer 5

[Одиночка Айс]

border-radius = height, легче через переменные задавать