Crea diseños diagonales como si fuera 2020

Nils Binder cubre los caminos :

1. Utilice un SVG en forma de triángulo. Erik Kennedy describe muy bien esta técnica en CSS-Tricks .

2. Oculta parte de tu sección usando clip-path. Lea Contenedores diagonales en CSS de Sebastiano Guerriero o Bordes inclinados con ángulo consistente en CSS de Kilian Valkhof.

3. Usar transformaciones CSS

Normalmente sería el tipo número 2: corta un poco la parte superior e inferior, asegúrate de que haya suficiente relleno y termina el día. Pero Nils casi me convence de que estas matemáticas sofisticadas son mejores.

Aquí hay una clip-pathmanera un poco tonta:

Y el increíblemente elegante parque infantil de Nil:

Enlace directo →