Coins arrondis CSS

Pour réaliser des blocs (menus ou autres) avec des coins arrondis, il existe principalement trois méthodes en CSS, qui offrent plus ou moins de fluidité et de possibilités graphiques.

Créer des coins arrondis avec une seule image, coulissante en hauteur et en largeur, permet une certaine liberté graphique et s'adapte à un design fluide.

N'hésitez pas à nous faire part de votre avis sur cet article : 6 commentaires Donner une note à l'article (4.5)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

Préambule

Les trois méthodes courantes pour créer des coins arrondis sont :
  1. La propriété CSS 3 border-radius (implémentation très attendue !) ;
  2. La technique positionnant 4 images de coins à l'aide de 4 div imbriqués ;
  3. La technique de l'image coulissante en hauteur.

Chacune de ces méthodes a ses avantages et ses inconvénients.

Cette 4ème méthode, utilisant une seule image adaptable en hauteur et en largeur pour un design fluide, s'inspire des deux dernières pré-citées. Elle souffre aussi de quelques défauts, notamment l'éternelle imbrication de plusieurs div. Cependant, elle a l'avantage d'offrir plus de possibilités graphiques (et donc pour faire autre chose que des coins arrondis) que la seconde technique. Attention cependant à ce que cette image de fond ne soit pas trop lourde !

Fonctionne avec :
  • Tous les navigateurs graphiques.
Attributs utilisés :
  • background ;
  • margin ;
  • max-width (inopérant avec IE6) ;
  • padding.

Image de fond

Le but est donc de mettre en fond une seule image, très grande, qui pourra s'adapter aux résolutions les plus courantes. La taille des écrans s'agrandissant, j'ai tablé sur une largeur d'environ 2000 pixels, la hauteur en faisant autant. Bien entendu, si vous pensez que vos pages pourront dépasser 2000 pixels de hauteur, il faudra la rallonger d'autant !

L'image a un poids d'un peu moins de 17 ko, elle est donc très légère et se chargera très vite.

Code (X)HTML

Il faut donc 4 div (eh oui...) pour permettre de positionner correctement l'image autour du texte.

 
Sélectionnez

<div id="gauche">
  <div id="droite">
    <div id="haut">
      <div></div>
    </div><!-- /haut -->
    <h2>Lorem ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Mauris vulputate laoreet urna. Integer magna. 
      Donec facilisis lectus sed quam. 
      Curabitur sit amet lacus id lacus facilisis venenatis.
    </p>
  </div><!-- /droite -->
</div><!-- /gauche -->
				

Code CSS

On commence par positionner le coin bas gauche de l'image de fond à l'aide de la propriété background. Le margin:auto est facultatif, c'est juste pour centrer le bloc dans la page. Par contre, la précaution du max-width, correspondant à la largeur réelle de l'image, est indispensable pour les résolutions d'écran supérieures à celle-ci : elles sont encore rares, mais suffisantes pour en tenir compte.

Pour rappel, le code :

 
Sélectionnez

  background-color:#E4EFFF;
  background-image:url(images/fond-arrondi.png);
  background-repeat:no-repeat;
  background-position:bottom left;
				

peut s'optimiser par :

 
Sélectionnez

background:#E4EFFF url(images/fond-arrondi.png) no-repeat bottom left;
				

Cela donne donc :

 
Sélectionnez

#gauche {
  background:#E4EFFF url(images/fond-arrondi.png) no-repeat bottom left;
  margin:auto;
  max-width:2007px;
}
				

On positionne ensuite le bas de l'image à droite (bottom right). C'est donc le premier "coulissement" de l'image en faisant glisser le côté droit sur le côté gauche. Les 7 pixels déclarés en marge de gauche (margin-left) correspondent à la largeur de l'arrondi qui ne doit pas être recouvert.

Image non disponible
 
Sélectionnez

#droite {
  background:#E4EFFF url(images/fond-arrondi.png) no-repeat bottom right;
  margin-left:7px;
  padding-bottom:20px;
}
				

Vient ensuite le tour du positionnement du haut de l'image avec l'élément supérieur du bloc délimités par le <div id="haut"> et l'autre div imbriqué. C'est le second coulissement, cette fois en hauteur. Les tailles de 7 pixels correspondent toujours aux tailles des coins.

 
Sélectionnez

#haut {
  background:#E4EFFF url(images/fond-arrondi.png) no-repeat top right;
  margin-left:-7px;
  padding:0;
}
#haut div {
  background:#E4EFFF url(images/fond-arrondi.png) no-repeat top left;
  height:7px;
  width:7px;
}
				

Ne reste plus qu'à définir les marges désirées pour que le texte ne colle pas aux bords de l'image sans interférer avec les positionnements précédents.

 
Sélectionnez

p, h2 {
  padding:5px 10px;
  margin:0;
}
				

Voir le résultat

Lectures complémentaires

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 22/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.