WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ruban CSS
1352
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
23 August 2025
Structure HTML du conteneur d'animation CSS
26 August 2025
Site Web de portfolio turc : HTML, CSS, JS, Tailwind
4 May 2025
Modèle de barre de navigation HTML et CSS réactif
HTML
Copy
Pure CSS Ribbon
CSS
Copy
.css-ribbon { position: relative; z-index: 1; padding: 1em 2em; } .bsribbon { font-size: 120% !important; width: 60%; position: relative; background: #0cc5f4; color: #fff; text-align: center; padding: 1em 2em; margin: 2em auto 3em; } .bsribbon:before, .bsribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #04a8d1; z-index: -1; } .bsribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } .bsribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } .bsribbon .ribbon-content:before, .bsribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #088eb0 transparent transparent transparent; bottom: -1em; } .bsribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } .bsribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; } @keyframes colorChange { 0% { background-color: #36d0ff; } 50% { background-color: #2c86d4; } 100% { background-color: #36D0FF7; } } .bsribbon { animation: colorChange 3s infinite; } .bsribbon:hover { box-shadow: 0 0 10px #ffffff; } button:hover { background-color: #9ad9e3; } .bsribbon:active { background-color: #eddcad; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */