le MEMO du WEB développeur
••• CSS •••  Liste des Mémos, astuces et bonnes pratiques

Dessiner un cercle sans image grâce à CSS 3

 

En quelques petites lignes de code, voici un rond tout de CSS3 conçu, et ce sans image !

La technique utilise la propriété border-radius qui permet d'arrondir les bords d'un élément HTML. Le principe est de donner un arrondi adapté à la taille de l'élément afin de lui donner une forme parfaitement arrondie.

code HTML :

<div id="moncercle"></div>

code CSS :

#moncercle{
  background:#bfd70e;
  border-radius:50%;
  width:160px;
  height:160px;
  border:2px solid #679403; 
}
Non compatible avec les vieux navigateurs ...
publié le 03/08/2012 par Memo Web
CSS3
Commentaire :
Bonjour, la réponse de tarabusk est très bonne et si je peux me permettre, pensez à définir la taille de police en absolue afin de pouvoir maitriser vos padding.

Mais il y a une autre possibilité, c'est l'imbrication de DIV. Votre 1er DIV (le cercle) doit avoir une taille définie en absolue. Le 2nd DIV, imbriqué dans le 1er, définissez lui une taille à 50% avec les marges en AUTO, sans padding et le texte centré en taille absolue.

Une autre possibilité aussi serait d'utiliser le sélecteur CSS :AFTER en position absolue et de jouer sur la position du CONTENT (CONTENT:"texte").

Les possibilités sont multiples et fonctionnent très bien quand il s'agit d'insérer un unique caractère dans un cercle dont vous définissez la taille. Par contre en tailles relatives vous vous heurterez à plusieurs galères. A mon sens c'est la solution des div imbriquées qui me paraît la plus facilement contrôlable.

par inconnu, le 07/06/2014
Merci !
pour centrer le text verticalement, on peut tout simplement mettre height et **line-height** à la même valeur
par inconnu, le 29/05/2014
merci
par inconnu, le 25/03/2014
Pour rajouter du texte dans le cercle je conseillerais de créer un nouvel élément div à placer en superposition sur le cercle (en mettant l'un des deux div en position absolute)
Il est possible de rajouter du texte directement dans le div qui représente le cercle, dans ce cas il faut jouer avec les paddings afin que le texte s'affiche au centre du cercle tout en gardant la forme circulaire.
par tarabusk, le 13/03/2014
et du texte dedans ?
par inconnu, le 21/02/2014
Commenter le Mémo :

Colorer une ligne sur 2 dans un tableau en CSS3
Un joli titre sans image, tout en CSS
Arrondir les bords d'un élément
@font-face ou Comment choisir une police non standard
Une bordure en pointillés en CSS3 - Effet couture.
Un effet de changement de couleur fluide en CSS3
Enlever la bordure qui apparaît au survol d'une image sur un lien hypertexte
Comment rajouter un séparateur entre les items d'une liste
Les transitions en CSS3 : rotation d'un élément - rotate()
Aligner verticalement du texte avec une image
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos