CSS3 SECHE Transformación en un lado

Comprender cómo crear un efecto "CSS3 Transform Skew un lado" puede ser útil para varios proyectos de diseño web. Sin embargo, es importante tener en cuenta que simplemente aplicar una transformación de sesgo puede no producir los resultados deseados al usar una imagen para el fondo.

abordar el problema

En su caso específico, requiere una transformación de CSS3 para que solo se asquegue un lado de una imagen mientras mantiene un área sesgada transparente. La solución proporcionada usando bordes sólidos no logrará este efecto de manera efectiva.

La solución: Div anidada con sesgo opuesto

para lograr el efecto deseado, considere utilizar un divisor para la imagen y aplicar un valor de sesgo opuesto al del div. Por ejemplo, si ha aplicado un sesgo de 20 grados al contenedor principal, proporcione el anateado (imagen) div un valor de sesgo de -20 degrees.

código de ejemplo:

para demostrar, aquí hay un ejemplo usando un divs y divs anulado:

[&]. Contenedor de contenedor desbordamiento: oculto; } #parallelograma { Ancho: 150px; Altura: 100px; margen: 0 0 0 -20px; transformar: sesgo (20deg); Antecedentes: rojo; desbordamiento: oculto; Posición: relativo; } .imagen { Antecedentes: URL (http://placekitten.com/301/301); Posición: Absoluto; arriba: -30px; Izquierda: -30px; Derecha: -30px; Abajo: -30px; transformar: sesgo (-20deg); }

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

Este código creará un sesgo de 20 grados en el contenedor de paralelograma rojo. En su interior, se colocará una imagen en un DIV anidado con un sesgo de -20 grados, invirtiendo efectivamente el sesgo aplicado al contenedor principal y revelando el área transparente sesgada detrás de él.