Créer un ruban simple et léger en HTML/CSS (sans image JPG/PNG)

Voici un petit bout de HTML et de CSS, simple et léger, qui crée un fond en forme de ruban avec du texte, sans aucune image JPG ou PNG.

Démo : un ruban CSS pour votre site web

HTML

Copiez le code ci-dessous et collez-le dans votre document HTML.

<div class="ribbon">
    <span class="ribbon-text">My Ribbon</span>
</div>

CSS

Copiez le code ci-dessous et collez-le dans votre fichier CSS.

.ribbon {
    position: relative;
    background: blue;
    text-align: center;
    z-index: 1;
    width: 240px;
    height: 52px;
    margin: 0 auto;
}
.ribbon-text {
    position: relative;
    display: block;
    font-size: 2em;
    color: white;
}
.ribbon:before {
    content: '';
    border: 26px solid blue;
    border-left-color: transparent;
    border-left-width: 14px;
    position: absolute;
    top: 0;
    left: -20px;
}
.ribbon:after {
    content: '';
    border: 26px solid blue;
    border-right-color: transparent;
    border-right-width: 21px;
    position: absolute;
    top: 0;
    right: -27px;
}

Vous pouvez modifier la couleur et la taille du ruban. Pour changer la couleur, remplacez blue dans background et dans les deux déclarations border. Si vous modifiez la hauteur, réglez la largeur de bordure de 26px sur :before et :after à la moitié de la nouvelle hauteur. Amusez-vous bien !