Cómo crear: Cinta CSS

Cómo crear una cinta

Primer paso - Añadir HTML:

En este ejemplo, la cinta pertenece al elemento button:

<button class="btn">Un botón para algo genial <span class="ribbon">NUEVO</span></button>

Segundo paso - Añadir CSS:

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

Prueba personalmente

Explicación del ejemplo:

En este ejemplo, CSS se utiliza para agregar un efecto de cinta a un botón. Este efecto de cinta se realiza mediante la adición de un elemento span con un estilo específico dentro del elemento del botón. Este elemento span se coloca en la esquina superior derecha del botón y se rota 20 grados para crear el efecto de cinta. El color de fondo y el color del texto de la cinta también se establecen en colores diferentes al del botón para aumentar el efecto visual.