Nils Binder cubre las formas:
1. Utilice un SVG en forma de triángulo. Esta técnica está muy bien descrita por Erik Kennedy en CSS-Tricks.
2. Oculte parte de su sección usando clip-path. Lea Contenedores diagonales en CSS de Sebastiano Guerriero o Bordes inclinados con ángulo constante en CSS de Kilian Valkhof.
3. Usar transformaciones CSS
Normalmente sería un tipo # 2: corte un poco la parte superior e inferior, asegúrese de que haya suficiente relleno y termine el día. Pero Nils casi me ha convencido de que esta sofisticada matemática es mejor.
Aquí hay un poco tonto clip-path camino:
Y el patio de recreo increíblemente elegante de Nils:
Enlace directo →