Capsule de forme à l'aide de border-radius sans un ensemble de largeur ou de la hauteur?

Est-il possible de faire une capsule de forme à l'aide de border-radius sans un ensemble de largeur ou de la hauteur?

Je veux les côtés gauche et droit pour être complètement arrondis tandis que la capsule resterait tout droit le long de sa longueur horizontale. Réglage d'un rayon de 50% ne semble pas donner l'effet souhaité.

Vous pourriez faire l'souhaité mathématiques à l'aide d'un langage côté serveur ou de javascript et de générer de manière appropriée à partir de là.
C'est une option. Juste semble exagéré quelque chose de tellement de présentation. Je suis à la recherche de l'utiliser pour les boutons, donc je pourrais être capable de faire progresser l'utilisation de ems.
Cette question explique comment cela fonctionne : stackoverflow.com/questions/29966499/...
A-t-elle à utiliser border-radius? Vous pourriez aussi le faire avec les 3 propriétés de l'arrière (2 radiale-pentes pour les extrémités)

InformationsquelleAutor christian | 2013-09-13

87

L'application d'un très grand rayon des frontières semble fonctionner sur la plupart des navigateurs (IE9+, FF, Chrome), comme ce mod de David violon http://jsfiddle.net/cthQW/1/
```
border-radius: 500px;
```
- Serait-ce la réponse? Coin des courbes ne doivent pas se superposer: Lorsque la somme des deux adjacents frontière rayons dépasse la taille de la zone de bordure, Samu doit réduire proportionnellement le recours à des valeurs de tous les rayons jusqu'à ce qu'aucun d'entre eux se chevauchent.
- Absolument! Bien trouvé, et un très impressionnant (et simple) de la solution; ont bien mérité upvote =)
- C'est agréable de penser que c'est peut-être pas un hack, après tout, et cela expliquerait pourquoi tous les navigateurs que j'ai observé jusqu'ici ont le même comportement.
- Wow. C'est génial.
- Pourquoi cela fonctionne, mais un grand pourcentage ne fonctionne pas?
- Je suppose que lors de l'utilisation de pourcentages de le rayon de courbure est calculée sur la base des éléments de la hauteur et le rayon horizontal est calculée sur la base des éléments de largeur. Alors qu'une unité fixe ne varie pas de cette façon. Voici un border-radius violon qui permet de visualiser les différences entre les unités fixes et les pourcentages.
InformationsquelleAutor Jeremy Cook
16

Oui, c'est possible (bien que je ne l'ai testé en Chrome 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 démo.

L'information importante est, de toute évidence, la 20%/50% de valeur de propriété; la 20% est "horizontal de la longueur du rayon, alors que la 50% est la "longueur verticale'; à l'aide de deux mesures donne une courbe elliptique à la frontière, au lieu d'une seule mesure, ce qui donne le plus d'circulaire de rayon. Cela nécessite évidemment une certaine quantité de l'ajustement de vos propres besoins

Références:
- border-radius (à Mozilla Developer Network).
- CSS Milieux et des Frontières au Niveau du Module 3: 5.1. Rayons de courbure: le "border-radius" propriétés.
- Ok, je vois votre point; mais c'est toujours un problème d'utilisation de border-radius (que le contenu n'est pas nécessairement "contenu" à l'intérieur de la frontière de la courbe. À l'aide de padding peut aider, bien; Ou un élément enfant, avec un margin.
- cela ne fonctionne pas si vous ne voulez pas rond tous les frontières
- Ouais ce n'est pas exactement ce que vous voulez
InformationsquelleAutor David says reinstate Monica
2

C'est ce que j'ai trouvé de bien travailler:

border-radius: 50vh;

Prise en charge du navigateur semble bon pour que maintenant.

À expliquer, le vh est une "Fenêtre d'affichage de l'Unité" qui calcule la hauteur de la fenêtre en pixels. En disant 50vh de déclarer le rayon des frontières, il est 50% * (Viewport Height)px.
- S'il vous plaît ajouter une explication pour votre réponse.
- Ce n'est pas le bon. Cela fonctionne parce que 50vh est la moitié de la hauteur de la écran, et qui est plus grand que le rayon maximal de sorte qu'il tronquée vers le bon rayon. Si vous ne 1000vh il va se comporter de la même.
- J'ai expliqué la hauteur de l'écran dans ma réponse. Il fonctionne généralement bien pour moi, mais vous avez peut-être raison en ce que le 1000vh est plus susceptibles de travailler pour les plus grands éléments.
- Je pense que @Timmmm point est qu'il y a rien de magique à propos de l'50 ici. Cela ne fonctionne que comme une conséquence de Jeremy Cook, en réponse à l'utilisation d'une grande valeur; 40vh ou 60vh ou 1000vh aurait tout aussi bien un type (ie petit-ish) de l'élément.
- Corrélation n'implique pas causalité.” Pas de magie sur le 50.
InformationsquelleAutor Nathan Powell
2

Si vous utiliser des pourcentages, il faut de l'élément de largeur pour calculer le rayon. Pour avoir la capsule en forme de l'élément, vous devez passer à la border-radius propriété des unités comme rem ou px (ni je sais la raison pour cela, mais il fonctionne). C'est pourquoi il fonctionne lors du passage de 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;
}
```
Ici vous avez un exemple dans CodePen. Essayez de changer la variable $label-height pour voir comment la forme est maintenue tandis 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 contenu du height et padding.

La propriété padding est utile d'établir une séparation entre le contenu et le composant de la frontière. Voir à quoi il ressemble si j'ai seulement mis le padding à gauche.

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

Si vous souhaitez définir la largeur du composant contenu de la largeur, vous pouvez définir la propriété d'affichage à inline-block, et l'utilisation FlexBox pour les organiser dans une colonne, par exemple. Et puis, définissez les marges gauche et droite pour auto, pour éviter l'élément de croître à son parent largeur.

Et si vous voulez laisser un espace entre les composants, vous pouvez définir la margin-top de propriété entre deux composants.
```
.capsule + .capsule {
    margin-top: 15px;
}
```
Espère que cela aide 🙂
- Si vous pouviez expliquer pourquoi le downvote, je pourrais savoir pourquoi je suis dans l'erreur et de faire mieux la prochaine fois. Il serait m'aider beaucoup. Merci 🙂
- Vous avez été downvoted parce que vous n'avez pas lu la question complète. Il dit clairement: "sans un ensemble de largeur ou de la hauteur". Je ne suis pas celui qui downvoted vous, si.
- Vrai! De ma faute. Merci beaucoup pour vos éclaircissements. Je vais essayer de corriger ma réponse 🙂
- Désolé de prendre autant de temps pour corriger la réponse. Laissez-moi savoir si vous trouvez quelque chose de mal ou de confusion. J'ai enlevé la largeur et la hauteur à partir de la définition du composant de styles et j'ai quitté la taille des composants à être ajusté par son contenu et son parent largeur.
InformationsquelleAutor Timbergus

Ceci peut être facilement réalisé à l'aide Span HTML. Vous avez juste à définir la couleur d'arrière-plan et border-radius.

CSS:

span {
  background-color: #f18973;
  border-radius: 10px;  
}

HTML:

<!DOCTYPE html>
<html>
<body>
<p>Set a <span>background color</span> for only a part of a text.</p>
</body>
</html>

InformationsquelleAutor Charan Ghate

Vous devez vous connecter pour publier un commentaire.