Comment créer : Ruban CSS

Comment créer un ruban

Première étape - Ajouter HTML :

Dans cet exemple, le ruban appartient à l'élément bouton :

<button class="btn">Un bouton pour quelque chose de cool <span class="ribbon">NOUVEAU</span></button>

Deuxième étape - Ajouter CSS :

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

Essayez-le vous-même

Explication de l'exemple :

Dans cet exemple, CSS est utilisé pour ajouter un effet de ruban à un bouton. Cet effet de ruban est réalisé en ajoutant un élément span avec un style spécifique à l'intérieur de l'élément bouton. Cet élément span est positionné dans le coin supérieur droit du bouton et est tourné de 20 degrés pour créer un effet de ruban. La couleur de fond et la couleur du texte du ruban sont également réglées sur des couleurs différentes de celles du bouton pour augmenter l'effet visuel.