Можно ли сделать форму капсулы с использованием радиуса границы без заданной ширины или высоты?
Я хочу, чтобы левая и правая стороны были полностью закруглены, а капсула оставалась бы прямой вдоль ее горизонтальной длины. Установка радиуса до 50%, похоже, не дает желаемого эффекта.
Применение очень большого радиуса границы, по-видимому, работает во многих браузерах (IE9 +, FF, Chrome), как этот мод David fiddle http://jsfiddle.net/cthQW/1/
border-radius: 500px;
Да, это возможно (хотя я только тестировал в Chromium 28/Ubuntu 12.10):
div {
/* this is the only relevant part: */
border-radius: 20%/50%;
/* this is irrelevant, and just so the element can be visualised/displayed: */
width: 50%;
height: 5em;
margin: 2em auto;
background-color: #000;
}
Важной информацией является, очевидно, свойство свойства 20%/50%; 20% является "горизонтальной длиной" радиуса, тогда как 50% является "вертикальной длиной"; используя два разных измерения, дает эллиптическую кривую к границе вместо одного измерения, которое дает более круговой радиус. Очевидно, для этого требуется определенная корректировка ваших собственных потребностей.
Литература:
Это то, что я нашел, чтобы хорошо работать:
border-radius: 50vh;
Поддержка браузера также хорошо выглядит для этого.
Чтобы объяснить, vh - это "Единица просмотра", которая вычисляет высоту высоты > /view > в пикселях. Говоря 50vh, чтобы объявить радиус границы, это 50% * (Viewport Height)px.
Если вы используете проценты, для расчета радиуса требуется ширина элемента. Чтобы получить капсульный элемент, вам нужно перейти к единицам свойства border-radius как rem или px (я не знаю причину этого, но это работает). Вот почему это работает при прохождении 500px. При желании вы можете использовать одно и то же значение для свойств line-height и border-radius.
.capsule {
line-height: 48px;
border-radius: 48px;
}
Здесь у вас есть пример в CodePen. Попробуйте изменить переменную $label-height чтобы увидеть, как поддерживается форма при изменении высоты кнопки.
В этом примере вам не нужно устанавливать ширину или высоту элемента. Вам просто нужно настроить height содержимого и padding.
Свойство padding полезно для установки разделения между содержимым и границей компонента. Посмотрите, как это выглядит, если я только установил левый отступ.
Если вы установите свойство line-height контейнера, вы автоматически установите высоту контейнера и одновременно центрируете содержимое внутри контейнера.
Если вы хотите установить ширину компонента равной ширине содержимого компонента, вы можете установить для свойства отображения компонента значение inline-block и использовать FlexBox, например, для их размещения в столбце. Затем установите для левого и правого поля значение auto, чтобы избежать увеличения элемента до родительской ширины.
И если вы хотите оставить пробел между компонентами, вы можете установить свойство margin-top между последовательными компонентами.
.capsule + .capsule {
margin-top: 15px;
}
Надеюсь, поможет :)