Creación de una cinta responsiva de 45 grados con esquina doblada

¿Es posible tener una cinta CSS con forma de esquina?

Usar un PNG La imagen es una opción, pero no es ideal para la capacidad de respuesta. Aquí se explica cómo crearlo exclusivamente con CSS:

.container {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  margin: 10px;
  background: lightblue;
}

.stack-top {
  --d: 5px;
  --g: 16px;
  --c: #333;

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg);
  color: #fff;
  text-align: center;
  width: 100px;
  transform-origin: bottom left;
  padding: 5px 0 calc(var(--d)   5px);
  background:
    linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left,
    linear-gradient(-135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d)),
    0 100%
  );
}

Personalizar la cinta

Puede ajustar las siguientes variables para personalizar la apariencia de la cinta:

• --d: controla el tamaño del pliegue de la esquina
• --g: controla la altura del pico de la cinta
• --c: especifica el color de la cinta

Uso

Para usar el cinta, simplemente agregue el siguiente código HTML a su documento:

  
1Month

También puede especificar las variables personalizadas directamente en el HTML utilizando el atributo de estilo, como se ve en el ejemplo actualizado a continuación:

  
1Month