¿Cómo crear un fondo inclinado con CSS?

Nuestro grupo redactor ha estado mucho tiempo buscando la solución a tus interrogantes, te regalamos la respuestas y nuestro objetivo es serte de mucha ayuda.

Solución:

Puede usar pseudo elemento con transformación sesgada:

body 
  height: 100vh;
  margin: 0;
  background: yellow;


body:before 
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;

Para mantener el mismo objeto visual al cambiar el tamaño, establezca un grande altura fija para el pseudo elemento y centrarlo:

html 
  background: yellow;


html:before 
  content: "";
  position: fixed;
  top: calc(50% - 1000px);
  left: 0;
  width: 500px;
  height:2000px;
  background: #000;
  transform: skew(-15deg);
  transform-origin:top;

Usar un degradado lineal en un ángulo

body 
 margin:0;
 

div 
  height: 100vh;
  background: linear-gradient(105deg, black 25%, yellow 25%)

Valoraciones y reseñas

---

---

Utiliza Nuestro Buscador