HTML et CSS Fluide Cercle

Je suis en train de créer un fluide cercle à l'aide de HTML et CSS. Je suis presque fait, mais comme il doit être fluide et le contenu à l'intérieur est dynamique, c'est l'évolution de sa forme de cercle, d'ovale, et d'autres.

CSS:

body {
  position: relative;
}
.notify {
  position: absolute;
  top: 100%;
  left: 20%;
  background: red;
  border: 2px solid white;
  border-radius: 50%;
  text-align: center;
}
.notify > div {
  padding: 20px;
}

HTML:

<div class="notify">
  <div>
    12
  </div>
</div>

Pouvez-vous m'aider s'il vous plaît?

Assurez-vous de tester en changeant le texte à l'intérieur de la div de 12 à 100 et etc
J'ai vu beaucoup de réponses, ce qui suggère l'utilisation de JavaScript afin de faire un carré ratio d'aspect de l'élément pour un 50% rayon des frontières. J'ai récemment écrit un billet de blog sur la façon dont cela peut être fait uniquement avec du CSS: ansciath.tumblr.com/post/7347495869/css-aspect-ratio
Oh, et Safari ne permet pas encore de traiter une frontière rayon spécifié comme un pourcentage.

InformationsquelleAutor Umair A. | 2011-07-08

8

La border-radius:50% hack qui vous êtes à l'aide fait l'hypothèse que le <div> est place avant l'arrondi des coins appliquée, sinon il va produire un ovale, plutôt que d'un cercle, exactement comme vous l'avez remarqué.

Par conséquent, si vous voulez le cercle de rester circulaire que le contenu se développe, vous devez ajuster dynamiquement la hauteur pour correspondre à la largeur. Vous auriez probablement besoin d'utiliser le Javascript pour atteindre cet objectif.

Aussi, veuillez noter que border-radius n'est pas pris en charge dans les anciennes versions de IE, de sorte que les utilisateurs avec IE6, IE7 ou IE8 ne verrez pas votre cercle à tous. (si il y a un hack pour cela appelé CSS3Pie)

Bien sûr, le réglage de la height aura l'effet secondaire de la prise de l'élément de prendre plus d'espace à la verticale. Cela peut ne pas être ce que vous voulez; vous pouvez le cercle de la même taille, indépendamment de ce que le contenu est en elle? Dans ce cas, vous devez corriger la hauteur et la largeur du cercle, et de donner le contenu position:absolute; pour l'empêcher d'affecter la taille de son parent.

Une alternative à l'utilisation de la border-radius hack pour produire un cercle serait l'utilisation de SVG. SVG est un vecteur format graphique qui est intégré dans la plupart des navigateurs.

De nouveau, à l'exception notable de IE8 et plus tôt, mais IE prend en charge un autre format appelé VML. Divers scripts existent qui peut convertir entre les formats SVG et VML, de sorte que vous pouvez produire une solution de navigateur avec SVG plus de Javascript.

Si nous allons accepter le Javascript est une partie de la solution, vous pouvez simplement utiliser une bibliothèque javascript pour l'attirer en premier lieu. Ma suggestion serait Raphaël, qui génère SVG ou VML graphique selon le navigateur, il est en cours d'exécution.

Espère que ça aide.

InformationsquelleAutor Spudley
5

Vous devez définir width et height au maximum de ces deux, afin de rendre un carré, avec 50% rayon des coins, des résultats dans un cercle.

Vous pouvez le faire en jQuery:
```
$(function() {
  var $elem = $(".notify > div");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});
```
Essayer de modifier le contenu (à la fois en largeur et en hauteur) ici
- C'est vraiment utile. +1
InformationsquelleAutor Jose Rui Santos
2

Exemple d'un fluide cercle en utilisant seulement l'HTML et du CSS. Comme mentionné dans mes commentaires à la question, la technique est expliqué dans mon post de blog. Aussi, comme mentionné, Safari ne permet pas actuellement de jouer à nice avec une bordure rayon spécifié comme un pourcentage.
- Il est intéressant de hack, mais comment placer le contenu dans l'intérieur de la div maintenant si je ne veux pas calculer la position absolue du contenu ?
- Le contenu (dans ce cas, le cercle) est absolument placé à l'intérieur du conteneur. Le cercle doit occuper toute la surface du récipient. De cette façon, le conteneur agit comme une sorte de proxy pour le contenu. Le récipient peut ensuite être placé dans n'importe quelle manière que vous voulez, le calcul de sa position dans la manière que vous voulez.
InformationsquelleAutor Nathan Ryan

La manière Jose Rui Santos ne vous pouvez atteindre votre objectif. Mais faire quelques changements dans votre css.

Comme enlever le rembourrage de .notify > div et ajouter des styles comme ceci:

.notify > div
{    
    display: table-cell;
    vertical-align: middle;
}

et ajouter rembourrage en .notify classe comme ceci:

.notify
{
    position: absolute;
    top: 100%;
    left: 20%;
    background: red;
    border: 2px solid white;
    border-radius: 50%;
    padding: 30px;
    text-align: center;

}

et Jquery code comme mentionné par Jose Rui Santos:

var $elem = $(".notify > div");
var maxSize = Math.max($elem.width(), $elem.height());
$elem.width(maxSize).height(maxSize);

Voir le travail de Démonstration: http://jsfiddle.net/2j5Ek/63/

InformationsquelleAutor Ahsan Rathod

0

Forcer la hauteur maximale et le poids par la mise en max-width:XXpx; max-height:XXpx va faire le travail.

Veuillez noter que vous devrez peut-être utiliser CSS3 word-wrap: break-word; pour casser les mots. Compatibilité inter-navigateur peut être un problème.

InformationsquelleAutor Andrzej Ośmiałowski
0

vous avez besoin d'un moyen de faire appliquer hauteur /largeur sinon il suffit d'aller ovale... c'est possible!

sur ce html
```
<div class="notify">
    <div class="child">
        12334        
    </div>
</div>
```
ce script jQuery devrait le faire..
```
var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px',
    'line-height': cw + 'px'
});
```
- ne fonctionnera pas si la hauteur > largeur
- il fonctionne j'ai essayé de lui.
- Non, si vous essayez, par exemple <div class="notifier"> <div class="enfant"> 12<br /> 12<br /> 12<br /> 12<br /> </div> </div>
- ce n'est pas une obligation!
- Umair a écrit content inside is dynamic. Cela signifie qu'il peut changer la largeur ou la hauteur. Pourquoi devrait toujours être la largeur > hauteur?
- eh bien, cela peut casser, mais pour une ligne de texte centré, il fonctionne très bien!, contrairement à la vôtre qui laisse le texte en haut donc, si le texte est long, le texte sort du cercle, donc tbh ma solution est la meilleure (en supposant que 1 ligne de texte)
InformationsquelleAutor Treemonkey

Vous devez vous connecter pour publier un commentaire.