Форма капсулы с использованием радиуса границы без заданной ширины или высоты?

Можно ли сделать форму капсулы с использованием радиуса границы без заданной ширины или высоты?

Я хочу, чтобы левая и правая стороны были полностью закруглены, а капсула оставалась бы прямой вдоль ее горизонтальной длины. Установка радиуса до 50%, похоже, не дает желаемого эффекта.

Capsule Shape

+47
источник поделиться
4 ответа

Применение очень большого радиуса границы, по-видимому, работает во многих браузерах (IE9 +, FF, Chrome), как этот мод David fiddle http://jsfiddle.net/cthQW/1/

border-radius: 500px;
+82
источник

Да, это возможно (хотя я только тестировал в 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;
}

JS Fiddle demo.

Важной информацией является, очевидно, свойство свойства 20%/50%; 20% является "горизонтальной длиной" радиуса, тогда как 50% является "вертикальной длиной"; используя два разных измерения, дает эллиптическую кривую к границе вместо одного измерения, которое дает более круговой радиус. Очевидно, для этого требуется определенная корректировка ваших собственных потребностей.

Литература:

+16
источник
другие ответы

Связанные вопросы


Похожие вопросы

Это то, что я нашел, чтобы хорошо работать:

border-radius: 50vh;

Поддержка браузера также хорошо выглядит для этого.

Чтобы объяснить, vh - это "Единица просмотра", которая вычисляет высоту высоты > /view > в пикселях. Говоря 50vh, чтобы объявить радиус границы, это 50% * (Viewport Height)px.

+4
источник

Если вы используете проценты, для расчета радиуса требуется ширина элемента. Чтобы получить капсульный элемент, вам нужно перейти к единицам свойства border-radius как rem или px (я не знаю причину этого, но это работает). Вот почему это работает при прохождении 500px. При желании вы можете использовать одно и то же значение для свойств line-height и border-radius.

.capsule {
    line-height: 48px;
    border-radius: 48px;
}

Здесь у вас есть пример в CodePen. Попробуйте изменить переменную $label-height чтобы увидеть, как поддерживается форма при изменении высоты кнопки.

В этом примере вам не нужно устанавливать ширину или высоту элемента. Вам просто нужно настроить height содержимого и padding.

Свойство padding полезно для установки разделения между содержимым и границей компонента. Посмотрите, как это выглядит, если я только установил левый отступ.

enter image description here

Если вы установите свойство line-height контейнера, вы автоматически установите высоту контейнера и одновременно центрируете содержимое внутри контейнера.

Если вы хотите установить ширину компонента равной ширине содержимого компонента, вы можете установить для свойства отображения компонента значение inline-block и использовать FlexBox, например, для их размещения в столбце. Затем установите для левого и правого поля значение auto, чтобы избежать увеличения элемента до родительской ширины.

enter image description here

И если вы хотите оставить пробел между компонентами, вы можете установить свойство margin-top между последовательными компонентами.

.capsule + .capsule {
    margin-top: 15px;
}

Надеюсь, поможет :)

+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос