Est-il possible de créer une forme de capsule en utilisant border-radius sans définir de largeur ou de hauteur ?
Je veux que les côtés gauche et droit soient complètement arrondis tandis que la capsule reste droite sur toute sa longueur horizontale. Le réglage du rayon à 50% ne semble pas donner l'effet désiré.
L'application d'un très grand rayon de bordure semble fonctionner sur de nombreux navigateurs (IE9+, FF, Chrome) comme cette modalité du violon de David http://jsfiddle.net/cthQW/1/
border-radius: 500px;
Oui, c'est possible (bien que je n'aie 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;
}L'information importante est, évidemment, le 20%/50% propriété-valeur ; le 20% est la "longueur horizontale" du rayon, tandis que l'indice 50% est la "longueur verticale" ; l'utilisation de deux mesures différentes donne une courbe elliptique au bord, au lieu d'une seule mesure, qui donne un rayon plus circulaire. Il est évident que cela nécessite un certain nombre d'ajustements en fonction de vos propres besoins.
Références :
Si vous utilisez des pourcentages, il prend la largeur de l'élément pour calculer le rayon. Pour avoir l'élément en forme de capsule, vous devez passer à la fonction border-radius des unités de propriété comme rem o px (je ne sais pas non plus pourquoi, mais ça marche). C'est pourquoi cela fonctionne lorsque l'on passe 500px . Vous pouvez utiliser la même valeur pour line-height y border-radius si vous le souhaitez.
.capsule {
line-height: 48px;
border-radius: 48px;
}Vous avez ici un exemple dans CodePen . Essayez de changer la variable $label-height pour voir comment la forme est maintenue alors 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. Il suffit d'ajuster la valeur height y padding .
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 fixe que le padding gauche.
Si vous définissez le line-height du conteneur, vous définirez automatiquement la hauteur du conteneur et centrerez le contenu à l'intérieur du conteneur en même temps.
Si vous souhaitez définir la largeur du composant en fonction de la largeur du contenu du composant, vous pouvez définir la propriété d'affichage du composant sur inline-block et utiliser FlexBox pour les disposer en colonne, par exemple. Ensuite, réglez les marges gauche et droite sur auto, pour éviter que l'élément ne s'étende à la largeur de son parent.
Et si vous souhaitez laisser un espace entre les composants, vous pouvez définir l'option margin-top entre des composants consécutifs.
.capsule + .capsule {
margin-top: 15px;
}J'espère que cela vous aidera :)
Ceci peut être facilement réalisé en utilisant le HTML Span. Il suffit de définir la couleur de fond et le rayon de la bordure.
span {
background-color: #30bb36;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
}
<!DOCTYPE html>
<html>
<body>
<p>Set a <span>Background Color</span> for only a part of a text.</p>
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</body>
</html>
Voici ce que j'ai trouvé qui fonctionne bien :
border-radius: 50vh;
Le support du navigateur semble bon pour cela aussi.
Pour expliquer, le vh est une "unité de visualisation" 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 .
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
