Un effet coin plié en CSS et sans image

Un petit effet sympathique de coin plié sans image pour donner du style à un paragraphe, c’est possible en jouant sur les pseudo-classes before et/ou after, et sur le comportement des bordures d’un élément. Explications…

Dans un précédent article, nous avions parlé des pseudo-classes before et after, pour voir ce qu’il était possible d’en faire. Passons donc aux choses sérieuse. Mais tout d’abord, détaillons le comportement des bordures d’un élément.

Les bordures

Prenons un exemple concret : Un div de 100px de large, de 50px de haut, avec une bordure large. Sachez qu’il est possible, de définir une couleur / taille de bordure différente pour dans l’ordre le haut, la droite, le bas et la gauche. Voici un exemple de css :

background: none repeat scroll 0% 0% #ccc;
border-color: #658E15 #33CCCC #ff8000 #655552;
border-style: solid;
border-width: 30px;
height: 50px;
width: 100px;

Pour ce qui est de la couleur, la première correspond à la bordure haute, la seconde à la droite, la troisième au bas et la dernière à la gauche.

Oui vous le savez peut-être déjà, mais ça ne fais jamais de mal de rappeler les bases !

 

 

 

 

Voilà le rendu :

En gros, le navigateur comprend que chaque bordure a une couleur différente. Il doit bien se dépatouiller, alors il va dans chaque zone de « conflit » (les coins) faire fifty-fifty, en créant la diagonale que l’on observe.

Imaginons maintenant un instant que je change les épaisseurs de bordures, car je ne veux ni bordure haute, ni gauche. Pour cela je change le border-width en éclatant le « 30px » en quatre parties : 0px 30px 30px 0px. Voilà le rendu :

Bien. Imaginons maintenant que je souhaite indiquer une hauteur et une épaisseur nulle. Pourquoi? Nous verrons plus bas. Voici ce que ça donne si je change height:50px et width:100px en width:0px et height:0px :

On comprend maintenant que ce que l’on voit ne sont que les bordures droites et basses d’un élément div. Voilà pour la théorie, voyons comment utiliser cela pour faire notre effet coin plié, même si vous en avez peut-être une petite idée.

Des p’tits coins…

Au début de cet article il est fait mention d’un précédent court tuto sur les pseudo classes before et after.

Nous considéreront à partir de ce point que ces pseudo-classes n’ont plus de secrets pour vous !

Prenons un div. Tout simple :

<div id="monsecondtest"></div>

 

 

A ce div, attribuons le style suivant :

#montest{
	display: block;
	position: relative;
	width: 400px;
	height: 150px;
	background: #aaa;
	margin: 0 auto; padding: 0;
}

Nous allons transformer le div de notre dernière illustration de bordure (celle avec hauteur et largeur nulles et les bordures haut et gauche nulles également) pour en faire la pseudo-classe « before » du div #montest, puis nous le positionnerons à droite du div #montest :

#montest:before{
	content: "";
	position: absolute;
	right: 0px;
	border-color: #FFF #33CCCC #ff8000 #FFF;
	border-style: solid;
	border-width: 0px 30px 30px 0px;
	height: 0px;
	width: 0px;
	display: block;
}

Et voilà le rendu :

C’est maintenant OK. Plus qu’a modifier un peu les couleurs avec des tons de jaune et en donnant à la bordure droite de notre pseudo-classe une couleurs en adéquation avec le fond de la page :

On peut ensuite jouer sur les dégradés, ombres et arrondis, si l’on veut rendre tout ça un peu plus joli. Pour cela, on va imaginer dans un premier temps le dégradé sur le div principal :

]background: -webkit-gradient(linear, left bottom, left top, from(#E5CF33), to(#FAE139));
 background: -moz-linear-gradient(bottom,  #E5CF33,  #FAE139);

Puis des arrondis sur ce même div :

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

Jusque là, nous sommes bons :

Mais nous allons tout de même rajouter un peu d’ombre sur le coin plié. Pour cela agissons sur la pseudo-classe before du div principal. Nous y rajouterons ceci :

content: "";
position: absolute;
right: 0px;
border-color: #FFF #FFF #E5CF33 #E5CF33;
border-style: solid;
border-width: 0px 20px 20px 0px;
height: 0px;
width: 0px;
display: block;
-moz-box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);

Ce qui donne :

Enfin, un peu d’arrondis toujours sur le coin plié :

content: "";
position: absolute;
right: 0px;
border-color: #FFF #FFF #E5CF33 #E5CF33;
border-style: solid;
border-width: 0px 20px 20px 0px;
height: 0px;
width: 0px;
display: block;
-moz-box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
-moz-border-radius: 0pt 0pt 0pt 5px;
-webkit-border-radius: 0pt 0pt 0pt 5px;
border-radius: 0pt 0pt 0pt 5px;
border-color: #FFFFFF #FFFFFF #E5CF33 #E5CF33;
border-width: 10px;

Ce qui donne :

Et voilà, c’est déjà la fin. Le prochain billet consacré à l’utilisation des pseudo-classes before et after sera consacré aux effets d’ombres.

9 commentaires

  1. Bonjour,

    Merci pour ce script qui rend l’effet attendu et avec très peu de codage finalement !
    Petit plus pour les personnes qui rencontre (comme sur le tuto) toujours des marques d’ombrage à droite du plis il vous suffit d’ajouter une valeur de -1px pour :before sur top et right.

    Bonne continuation

  2. Salut !

    Super effet, vraiment attirant ! J’aimerai mettre cet effet en haut à droite de la « boîte » qui contient le texte sur mes pages. Ex, sur la page http://solution-epilation.fr/epilation-laser-definitive/, sur le coin en face de « Epilation laser ». J’ai essayé en reprennant ton code et en remplaçant #monsecondtest par #content-main, mais ça ne marche pas. Saurais tu quel code mettre en place ?

    Sinon dans ton précédent post sur les pseudo-classes before et after tu mets un petit teaser à la fin avec d’autres exemples. Ils sont carrément sympas, tu as un tuto quelque part sur eux ?? (je n’ai pas trouvé)

    Merci beaucoup,
    Thomas

    1. Salut,

      J’ai passé 30min à scruter le code source de ton site, mais impossible d’appliquer ça à l’élément que tu mentionne. Les autres en revanche pas de problème…

      tout ce que je peux conseiller, c’est de bien veiller à ne pas avoir de définitions parasites de par les différentes feuilles de styles, et de bien avoir des positionnements propres!

      Pour les autres exemples, non je n’ai palheureusement pas encore eu le temps dem e pencher dessus, mais je ne perds pas espoir d’y arriver 🙂

      Bon courage !

      1. Merci beaucoup pour ton temps, vraiment très sympa ! Bizarre… Comme j’utilise un thème WP tout fait (Graphene), et que j’ai des notions de codes mais sans être une star, je ne vais pas rentrer dans la matrice pour essayer de régler le bug. Peut être que je me débrouillerai avec une image, sinon tant pis pour le petit effet :-).

        Merci encore, je serai intéressé de voir les autres exemples !

        Ciao,
        Thomas

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *