18041 sujets

Questions générales et questions de débutants

[Résolu] Border radius

Salut,

Je me demandais comment être sûr de réaliser un cercle parfait avec border-radius quelque soit les contenus.

Imaginons que j'ai une structure dans ce genre :


<div class="container">
    <div class="subcontainer">
       <span>blablabla</span>	
    </div>								
    <p>
      un paragraphe
    </p>							
</div>


Je veux par exemple faire un cercle en bg de .subcontainer, je fais :


.subcontainer{
  -webkit-border-radius:50%;
  border-radius:50%;
}


Mais ça vire à l'ovale. J'ai qq techniques pour corriger mais y a sûrement une manière plus académique et surtout plus universelle. L'idée est de répéter tout ça.
Modifié par jmlapam (25 Jan 2014 - 13:00)
Administrateur
Bonjour,

ça vire à l'ovale parce que ta boîte n'est pas carrée au départ.

Si tu donnes un width et un height à .subcontainer (par exemple en "em"), ça devrait se passer mieux. Au pire, jouer avec line-height pour centrer verticalement le contenu.

Bonne chance Smiley smile
bonjour,
tu peut jouer sur les pourcentage verticaux des marges internes ou exxternes et te servir d'un pseudo-element comme d'un etai pour mintenir une hauteur minimale a ta boite.

http://codepen.io/gc-nomade/pen/Ispua

survol le div ou ajoute du contenu , un display:table( +table cell pour le pseudo) au lieu d'un inline-block serait peut-être plus adapté.
++
Salut,

@raphaël: Merci. En fait je joue déjà avec line-height mais ct bricolage (en même temps c'est du CSS...^^)
Si j'ai un besoin d'un cercle vraiment parfait, mieux vaut une image de background alors?


@gc: bah du coup j'essaie ^^
Modifié par jmlapam (25 Jan 2014 - 15:33)
Sujet clos
Aller à