Création de coins arrondis à l'aide de CSS [fermé]

StackOverflow https://stackoverflow.com/questions/7089

Question

Comment puis-je créer des coins arrondis en utilisant CSS ?

Était-ce utile?

La solution

Depuis l'introduction de CSS3, la meilleure façon d'ajouter des coins arrondis à l'aide de CSS est d'utiliser le border-radius propriété.Tu peux lire les spécifications sur la propriété, ou procurez-vous informations utiles sur la mise en œuvre de MDN:

Si vous utilisez un navigateur qui n'a pas mettre en œuvre border-radius (Chrome pré-v4, Firefox pré-v4, IE8, Opera pré-v10.5, Safari pré-v5), puis les liens ci-dessous détaillent tout un tas d'approches différentes.Trouvez-en un qui convient à votre site et à votre style de codage, et allez-y.

  1. Conception CSS :Création de coins et de bordures personnalisées
  2. « Roundup » des coins arrondis CSS
  3. 25 techniques de coins arrondis avec CSS

Autres conseils

J'ai regardé cela au début de la création de Stack Overflow et je n'ai pas trouvé n'importe lequel méthode de création de coins arrondis qui ne me donnait pas l’impression de traverser un égout.

CSS3 définit enfin le 

border-radius:

C'est exactement comme ça que vous voudriez que cela fonctionne.Bien que cela fonctionne correctement dans les dernières versions de Safari et Firefox, mais pas du tout dans IE7 (et je ne pense pas dans IE8) ou Opera.

En attendant, c'est du hack jusqu'au bout.Je suis curieux de savoir ce que d'autres personnes pensent être le moyen le plus propre de procéder pour le moment sur IE7, FF2/3, Safari3 et Opera 9.5.

J'obtiens généralement des coins arrondis uniquement avec CSS, si le navigateur ne le prend pas en charge, ils voient le contenu avec des coins plats.Si les coins arrondis ne sont pas si critiques pour votre site, vous pouvez utiliser les lignes ci-dessous.

Si vous souhaitez utiliser tous les coins avec le même rayon, c'est le moyen le plus simple :

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

mais si vous voulez contrôler chaque coin, c'est bien :

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Comme vous le voyez dans chaque ensemble, vous avez des styles spécifiques au navigateur et sur les quatrièmes lignes, nous déclarons de manière standard, nous supposons que si à l'avenir les autres (avec un peu de chance, IE aussi) décident d'implémenter la fonctionnalité pour que notre style soit également prêt pour eux.

Comme indiqué dans d'autres réponses, cela fonctionne à merveille sur Firefox, Safari, Camino, Chrome.

Si vous souhaitez créer des coins dans IE, cela peut être utile : http://css3pie.com/

Je recommanderais d'utiliser des images d'arrière-plan.Les autres méthodes ne sont pas aussi efficaces :Pas d'anti-aliasing et de balisage insensé.Ce n'est pas le lieu d'utiliser JavaScript.

Comme l'a dit Brajeshwar :En utilisant le border-radius sélecteur CSS3.À présent, vous pouvez postuler -moz-border-radius et -webkit-border-radius pour les navigateurs basés sur Mozilla et Webkit, respectivement.

Alors, que se passe-t-il avec Internet Explorer ?Microsoft propose de nombreux comportements pour permettre à Internet Explorer de bénéficier de fonctionnalités supplémentaires et d'acquérir plus de compétences.

Ici:un .htc fichier de comportement à obtenir round-corners depuis border-radius valeur dans votre CSS.Par exemple.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Bien sûr, le sélecteur de comportement n'est pas un sélecteur valide, mais vous pouvez le placer dans un autre fichier CSS avec des commentaires conditionnels (uniquement pour IE).

Le comportement du fichier HTC

Avec la prise en charge de CSS3 implémentée dans les versions plus récentes de Firefox, Safari et Chrome, il sera également utile d'examiner « Border Radius ».

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

Comme tout autre raccourci CSS, ce qui précède peut également être écrit dans un format étendu, et ainsi obtenir un rayon de bordure différent pour le haut gauche, le haut droit, etc.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

jQuery est la façon dont je gérerais cela personnellement.le support CSS est minime, les images sont trop compliquées, pouvoir sélectionner les éléments que vous souhaitez avoir des coins arrondis dans jQuery me semble parfaitement logique même si certains diront sans aucun doute le contraire.Il y a un plugin que j'ai récemment utilisé pour un projet au travail ici : http://plugins.jquery.com/project/jquery-roundcorners-canvas

Il existe toujours la méthode JavaScript (voir les autres réponses), mais comme il s'agit uniquement de style, je suis plutôt contre l'utilisation de scripts clients pour y parvenir.

La manière que je préfère (même si elle a ses limites), c'est d'utiliser 4 images aux coins arrondis que vous positionnerez dans les 4 coins de votre boite en CSS :

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Comme mentionné, cela a ses limites (l'arrière-plan derrière la boîte arrondie doit être uni sinon les coins ne correspondront pas à l'arrière-plan), mais cela fonctionne très bien pour tout le reste.

Mis à jour: Amélioration de l'implémentation en utilisant une feuille de sprite.

Personnellement, j'aime mieux cette solution, c'est un .htc pour permettre à IE de restituer des bordures courbes.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Dans Safari, Chrome, Firefox > 2, IE > 8 et Konquerer (et probablement d'autres), vous pouvez le faire en CSS en utilisant le border-radius propriété.Comme cela ne fait pas encore officiellement partie de la spécification, veuillez utiliser un préfixe spécifique au fournisseur...

Exemple

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Les solutions JavaScript ajoutent généralement un tas de petits divs pour lui donner un aspect arrondi, ou ils utilisent des bordures et des marges négatives pour créer des coins crantés de 1 px.Certains peuvent également utiliser SVG dans IE.

OMI, la méthode CSS est meilleure, car elle est simple et se dégradera gracieusement dans les navigateurs qui ne la prennent pas en charge.Ceci, bien entendu, n'est le cas que lorsque le client ne les applique pas dans les navigateurs non pris en charge tels que IE <9.

Voici une solution HTML/js/css que j'ai réalisée récemment.Il y a une erreur d'arrondi de 1 px avec un positionnement absolu dans IE, vous voulez donc que le conteneur ait un nombre pair de pixels de large, mais c'est assez propre.

HTML :

<div class="s">Content</div>

jQuery : 

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS :

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

L’image ne fait que 18 pixels de large et ses 4 coins sont regroupés.On dirait un cercle.

Note:vous n'avez pas besoin du deuxième wrapper interne, mais j'aime utiliser la marge sur le wrapper interne afin que les marges des paragraphes et des titres maintiennent toujours l'effondrement des marges.Vous pouvez également ignorer le jquery et simplement mettre le wrapper interne dans le code HTML.

Pour illustrer à quel point il est complexe de faire fonctionner des coins arrondis, même Yahoo les décourage (voir premier point) !Certes, ils ne parlent que de coins arrondis de 1 pixel dans cet article, mais il est intéressant de voir que même une entreprise avec son expertise a conclu qu'ils étaient tout simplement trop pénibles. pour les faire travailler la plupart du temps.

Si votre conception peut survivre sans eux, c'est la solution la plus simple.

Bien sûr, s'il s'agit d'une largeur fixe, c'est très simple d'utiliser CSS, et pas du tout offensant ou laborieux.C'est lorsque vous avez besoin d'évoluer dans les deux sens que les choses deviennent instables.Certaines solutions comportent un nombre impressionnant de divs empilés les uns sur les autres pour que cela se produise.

Ma solution est de dicter au concepteur que s'il souhaite utiliser des coins arrondis (pour le moment), il doit s'agir d'une largeur fixe.Les designers adorent les coins arrondis (moi aussi), je trouve donc que c'est un compromis raisonnable.

Frontières Ruzee est la seule solution de coins arrondis anticrénelés basée sur Javascript que j'ai trouvée qui fonctionne dans tous les principaux navigateurs (Firefox 2/3, Chrome, Safari 3, IE6/7/8), et AUSSI la seule qui fonctionne lorsque le l'élément arrondi ET l'élément parent contiennent une image d'arrière-plan.Il fait également des bordures, des ombres et de l'éclat.

Le plus récent RUZEE.ShadedBorder est une autre option, mais elle ne prend pas en charge l'obtention d'informations de style à partir de CSS.

Si vous optez pour la solution border-radius, il existe ce site Web génial pour générer le CSS qui le fera fonctionner pour safari/chrome/FF.

Quoi qu'il en soit, je pense que votre design ne devrait pas dépendre du coin arrondi, et si vous regardez Twitter, ils disent simplement F**** aux utilisateurs d'IE et d'opéra.Les coins arrondis sont agréables à avoir, et personnellement, je suis d'accord pour garder cela pour les utilisateurs sympas qui n'utilisent pas IE :).

Bien sûr, ce n'est pas l'opinion des clients.Voici le lien : http://border-radius.com/

En plus des solutions HTC mentionnées ci-dessus, voici d'autres solutions et exemples à atteindre coins arrondis dans IE.

Il n’y a pas de « meilleure » méthode ;il existe des méthodes qui fonctionnent pour vous et d'autres qui ne fonctionnent pas.Cela dit, j'ai publié ici un article sur la création d'une technique de coin arrondi fluide basée sur CSS+Image :

Boîte aux coins arrondis utilisant CSS et images - Partie 2

Un aperçu de cette astuce est celle qui utilise des DIV imbriqués ainsi que la répétition et le positionnement des images d'arrière-plan.Pour les mises en page à largeur fixe (largeur fixe et hauteur extensible), vous aurez besoin de trois DIV et de trois images.Pour une mise en page fluide (largeur et hauteur extensibles), vous aurez besoin de neuf DIV et de neuf images.Certains pourraient considérer cela comme trop compliqué, mais à mon humble avis, c'est la solution la plus intéressante qui soit.Pas de hacks, pas de JavaScript.

J'ai écrit un article de blog à ce sujet il y a quelque temps, donc pour plus d'informations, vois ici 

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Cela fonctionne plutôt bien.Aucun Javascript n'est nécessaire, juste CSS et HTML.Avec un minimum de HTML interférant avec les autres éléments.C'est très similaire à ce que Mono a publié, mais ne contient aucun hack spécifique à IE 6 et, après vérification, ne semble pas fonctionner du tout.En outre, une autre astuce consiste à rendre la partie intérieure de chaque image de coin transparente afin qu'elle ne bloque pas le texte situé à proximité du coin.La partie extérieure ne doit pas être transparente afin de pouvoir recouvrir la bordure du div non arrondi.

De plus, une fois que CSS3 sera largement pris en charge avec border-radius, ce sera le meilleur moyen officiel de créer des coins arrondis.

N'utilisez pas CSS, jQuery a été mentionné plusieurs fois.Si vous avez besoin d'un contrôle total sur l'arrière-plan et la bordure de vos éléments, donnez lePlugin de toile de fond jQuery un essai.Il place un élément HTML5 Canvas en arrière-plan et vous permet de dessiner tous les arrière-plans ou bordures de votre choix.Coins arrondis, dégradés, etc.

Opera ne prend pas encore en charge border-radius (apparemment, ce sera dans la version après la version 10).En attendant, vous pouvez utilisez CSS pour définir un arrière-plan SVG afin de créer un effet similaire.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top