Cinta de esquina y sello en CSS (ribbon y badge)
Elige el estilo, el texto y la esquina. La cinta se hace con un solo elemento y se ajusta al tamaño del texto.
Cómo usar"Más vendido" en la esquina de la tarjeta
Disponible en: 
Cinta de esquina y sello en CSS (ribbon y badge): para qué sirve
Una cinta en la esquina destaca el plan más elegido, el producto nuevo o la oferta sin cambiar el resto de la tarjeta. Elige entre cinta diagonal, sello redondo, etiqueta o franja doblada, el texto, la esquina, los colores y el tamaño.
El código incluye la tarjeta de ejemplo y el CSS de la cinta, hecha con un único elemento: en diagonal, la tarjeta corta lo que sobra con overflow hidden. La vista previa muestra el resultado al instante, y la página explica cuándo usar cada estilo.
Cómo usar
- Elige el estilo y el texto.
- Ajusta la esquina, los colores y el tamaño.
- Copia el código.
Cuándo usar
- Plan destacado en una tabla de precios.
- Producto nuevo o en oferta.
- Sello de descuento sobre fotos.
Preguntas frecuentes
¿Cómo queda cortada la cinta en la esquina?
La tarjeta recibe overflow: hidden y position: relative.
¿Los lectores de pantalla leen la cinta?
Sí, porque el texto está en el HTML. Si el sello solo repite algo que ya está en la tarjeta, puedes marcar la cinta con aria-hidden="true" para que no se anuncie dos veces.
¿Qué estilo usar?
La cinta diagonal llama más la atención y combina con planes destacados. El sello redondo es bueno para descuentos ('-20%') sobre fotos de productos, y la etiqueta es la más discreta, ideal para listas con muchos elementos.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.