WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Nastro CSS
1095
ledoc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
26 June 2025
Sito di e-commerce HTML, Tailwind CSS, Shopping
20 May 2025
Modulo di accesso Glassmorphism moderno in html, css
28 August 2025
Modulo di registrazione di Matrix Login HTML CSS
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) */