web-dev-qa-db-fra.com

Forme de la capsule en utilisant un rayon de bordure sans largeur ni hauteur définie?

Est-il possible de créer une forme de capsule en utilisant un rayon de bordure sans largeur ou hauteur définie?

Je veux que les côtés gauche et droit soient complètement arrondis tandis que la capsule reste droite le long de sa longueur horizontale. Le réglage du rayon à 50% ne semble pas donner l'effet souhaité.

Capsule Shape

csscss3css-shapes
47
christian

L'application d'un très grand rayon de bordure semble fonctionner sur de nombreux navigateurs (IE9 +, FF, Chrome) comme ce mod du violon de David http://jsfiddle.net/cthQW/1/

border-radius: 500px;
84
Jeremy Cook

Oui, c'est possible (même si je n'ai testé que dans 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 .

Les informations importantes sont évidemment les 20%/50% valeur de la propriété; le 20% est la "longueur horizontale" du rayon, tandis que 50% est la 'longueur verticale'; l'utilisation de deux mesures différentes donne une courbe elliptique à la bordure, au lieu d'une seule mesure, qui donne le rayon le plus circulaire. De toute évidence, cela nécessite un certain ajustement à vos propres besoins

Les références:

16
David Thomas

Voici ce que j'ai trouvé pour bien fonctionner:

border-radius: 50vh;

Le support du navigateur semble bon pour cela maintenant aussi.

Pour expliquer, le vh est une "unité de fenêtre" qui calcule la hauteur de la fenêtre en pixels. En disant 50vh Pour déclarer le rayon de la bordure, c'est 50% * (Viewport Height)px.

3
Nathan Powell

Si vous utilisez des pourcentages, il faut la largeur de l'élément pour calculer le rayon. Pour avoir l'élément en forme de capsule, vous devez passer au border-radius unités de propriété comme rem ou px (ni la raison pour cela, mais ça marche). C'est pourquoi cela fonctionne lors du passage 500px . Vous pouvez utiliser la même valeur pour line-height et border-radius propriétés si vous le souhaitez.

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

Voici un exemple dans CodePen . Essayez de changer la variable $label-height pour voir comment la forme est conservée pendant que la hauteur du bouton change.

Dans cet exemple, vous n'avez pas besoin de définir la largeur ou la hauteur de l'élément. Vous avez juste besoin d'ajuster le height et padding du contenu.

La propriété padding est utile pour définir une séparation entre le contenu et la bordure du composant. Voyez à quoi cela ressemble si je ne règle que le rembourrage gauche.

enter image description here

Si vous définissez le line-height propriété du conteneur, vous définissez automatiquement la hauteur du conteneur et centrez le contenu à l'intérieur du conteneur en même temps.

Si vous souhaitez définir la largeur du composant sur la largeur du contenu du composant, vous pouvez définir la propriété d'affichage du composant sur inline-block, et utilisez FlexBox pour les organiser dans une colonne, par exemple. Et puis, définissez les marges gauche et droite sur auto, pour éviter que l'élément n'atteigne sa largeur parent.

enter image description here

Et si vous souhaitez laisser un espace entre les composants, vous pouvez définir le margin-top propriété entre composants consécutifs.

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

J'espère que ça aide :)

1
Timbergus