Contenedores o DIV en diagonal con CSS

¿Cómo crear contenedores diagonales para el diseño de tu sitio web?

En este tutorial, vamos a echar un vistazo a cómo crear secciones diagonales de ancho completo en CSS mediante la propiedad clip-path.

Estos tipos de efectos pueden ayudar a romper la «monotonía » de un diseño basado sólo en secciones rectangulares.

Hay diferentes maneras de crear secciones diagonales (¿no es eso siempre cierto en CSS?). En nuestro caso, dependemos de la propiedad clip-path.

La propiedad clip-path permite recortar el elemento al que se aplica, definiendo un área que actúa como una máscara. En concreto, la función poligonal le permitirá especificar conjuntos de coordenadas que determinan la forma del polígono. La parte del elemento que está fuera del polígono no estará visible.

.component {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

En el ejemplo anterior, las coordenadas devuelven una forma rectangular. El primer valor de la coordenada se refiere al eje x, el segundo al eje y.

En nuestro tutorial, queremos crear una forma que difiera de la de un componente rectangular; por lo tanto, editamos las coordenadas para recortar partes del mismo.

.hero--diagonal {
position: relative;
background-color: transparent;

&::before {
content: »;
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: calc(100% + 100px);
clip-path: polygon(0% 0%, 100% 50px, 100% 100%, 0% calc(100% – 50px));
}

.hero__content {
position: relative;
z-index: 1;
}
}

En lugar de aplicar el clip-path al elemento héroe en sí, decidimos apuntar a su pseudo-elemento.

Si cortamos el elemento de héroe directamente, terminamos mostrando parte del fondo debajo del héroe (la parte que se recorta). Si consideramos un layout con secciones con diferentes colores, creamos triángulos entre las secciones:

Mediante la creación de un ::before pseudo-elemento, podemos ampliar el tamaño del fondo de héroe (cubriendo una pequeña parte de las secciones superior e inferior), eliminando así los triángulos adicionales. La propiedad clip-path se aplica al pseudo-elemento para crear los bordes diagonales.

Así de simple podemos crear nuestro fondo en diagonal para el diseño de nuestra web.

Visto en