L'effet ruban (Ribbon en anglais) est des plus simple à réaliser en utilisant les pseudo-éléments ::before et ::after.

Structure HTML

Nous allons réaliser l'effet ruban sur base de la structure suivante :

<div class="ribbon-box">
  <h3 class="ribbon">Titre ruban</h3>
</div>

CSS

Préliminaire

On commence par appliquer le style minimum suivant aux éléments <h3> :

h3.ribbon {
  position: relative;   /* pour servir de référent */
  margin: 1em -10px;    /* pour décaler les bords */
  background: #CC0000;  /* pour visualiser */
}

Pour tracer les « plis » du ruban on utilise les pseudo-éléments :before et :after auxquels on applique les propriétés communes suivantes :

La valeur -10px, de margin: 1em -10px, signifie que la largeur du « pli » sera de 10 pixels, c'est cette même valeur que nous utiliserons plus loin lors de la définition de la propriété border-width.

Nous continue par la règle commune aux pseudo-éléments :

/* la partie commune */
h3.ribbon::before,
h3.ribbon::after {
  content: "";
  position: absolute;
  border-style: solid;
}

Maintenant pour jouer sur le rendu final il faut modifier les propriétés de positionnement, de couleur et de largeur des bordures.

Suivant le rendu voulu on pourra positionner les plis comme suit :

• A gauche en haut (avec pseudo-élément :before) ;
• A gauche en bas (avec pseudo-élément :before) ;
• A droite en haut (avec pseudo-élément :after) ;
• A droite en bas (avec pseudo-élément :after).

Réalisation des « plis »

Nous allons utiliser des classes pour définir chaque type de « pli ».

A gauche en haut

h3.left-top::before {
  left: 0;
  bottom: 100%;
  border-color: transparent #800000;
  border-width: 10px 10px 0 0;
}

A gauche en bas

h3.left-bottom::before {
  left: 0;
  top: 100%;
  border-color: transparent #800000;
  border-width: 0 10px 10px 0;
}

A droite en haut

h3.right-top::after {
  right: 0;
  bottom: 100%;
  border-color: #800000 transparent;
  border-width: 0 10px 10px 0;
}

A droite en bas

h3.right-bottom::after {
  right: 0;
  top: 100%;
  border-color: #800000 transparent;
  border-width: 10px 10px 0 0;
}

Résultat

<div class="ribbon-box">
  <h3 class="ribbon left-bottom right-top">Ribbon bottom & top</h3>
</div>

<div class="ribbon-box">
  <h3 class="ribbon left-top right-bottom">Ribbon top & bottom</h3>
</div>

Ressources

• Les pseudo-éléments