WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Cinta CSS
1398
ledoc
Abrir en el editor
Publica tu código
Recomendado
23 August 2025
Ejemplo de animación de cuadrícula CSS
5 October 2025
Estructura HTML del contenedor de animación CSS
29 August 2025
Fragmento de animación de memoria 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) */