@PHP-GOD

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

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

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

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

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

Всем спасибо.
  • Вопрос задан
  • 141 просмотр
Пригласить эксперта
Ответы на вопрос 5
yarkov
@yarkov
Проект "Жизнь после смерти" - lifeafterdeath.ru
%
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Milovenskii
@Milovenskii
Проценты высчитывай
В твоем случае это 25, удачи :3
Ответ написан
saboteur_kiev
@saboteur_kiev
software engineer
Если ширина не меняется, а только высота, то border-radius:18%/50px
https://jsfiddle.net/q8u4kvay/
Ответ написан
daemonhk
@daemonhk
ПсиХоПат
border-radius = height, легче через переменные задавать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
08 мар. 2021, в 10:02
75000 руб./за проект
08 мар. 2021, в 10:00
700 руб./за проект
08 мар. 2021, в 08:37
3000 руб./за проект