En páginas que venden productos o quieren promocionar ofertas podemos usar cintas como la que explicaremos en este artículo para destacar visualmente algún detalle que queremos nuestros visitants vean.

Dirígete al final del artículo para ver el resultado final.

Estructura HTML

Primero crearemos una caja <div> que englobará el texto a resaltar:

<div class="box">
  <div class="cinta">Oferta</div>
</div>

La clase .box es nuestro contenedor —puede ser una tarjeta de producto, un banner, lo que sea. Dentro, colocamos el div con la clase .cinta, que es la que va a tener el efecto visual.

Los estilos CSS

Aquí es donde entra la parte interesante. La cinta no es una imagen, es puro CSS, con propiedades bien combinadas. Veamos el código completo:

.box {
  margin: 2rem;
  padding: 3rem;
  position: relative;
  background: #d0d0d0;
  min-height: 250px;
  width: 400px;
  font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

.cinta {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}

.cinta {
  --distancia: .5em;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--distancia);
  border-image: conic-gradient(#0008 0 0) 50%/var(--distancia);
  clip-path: polygon(100% calc(100% - var(--distancia)), 100% 100%, calc(100% - var(--distancia)) calc(100% - var(--distancia)), var(--distancia) calc(100% - var(--distancia)), 0 100%, 0 calc(100% - var(--distancia)), 999px calc(100% - var(--distancia) - 999px), calc(100% - 999px) calc(100% - var(--distancia) - 999px));
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  color: #ae9e0e;
  background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%);
}

Vamos por partes.

• .box está posicionada como relative para que podamos posicionar la cinta con absolute dentro de ella. También tiene un fondo gris claro y medidas fijas para facilitar la visualización.
• .cinta define un texto grande y con negrita, pero eso es lo básico.
• La clave está en propiedades como clip-path, transform y border-image.

Qué está pasando con clip-path y transform

Con clip-path recortamos la forma del contenedor de la cinta para que tenga un borde inferior irregular, casi como si estuviera “pegada” al borde de la caja.

La transformación rotate(45deg) y el translate previo colocan la cinta en diagonal, en la esquina superior derecha. Esto simula esas cintas que a veces vemos en tarjetas de producto que dicen, por ejemplo, “Nuevo”, “Descuento” o “Oferta”.

Un detalle curioso: usamos una variable --distancia para ajustar la profundidad de los bordes recortados, lo que hace más flexible el diseño.

Gradientes y detalles visuales

El fondo de la cinta es un degradado para contrastar con el gris de la caja. Además, el borde usa un conic-gradient muy sutil con transparencia para dar una sensación de volumen.

Ver resultado

Aquí puedes ver el ejemplo con el código completo.