1

Quiero crear un fondo inclinado para que mi sitio sea mas atractivo en general.

Un ejemplo bastante claro es el fondo rojo que tiene este sitio ''https://ed.team/''.

Entre en su código css pero no encuentro en donde le pone forma a ese fondo.

2

1 respuesta 1

1

Pues inspeccionando el código, ellos tienen lo siguiente:

.main-main.main-front #block-escueladigital-content::before {
    content: "";
    -webkit-clip-path: polygon(0 6%,100% 0,100% 94%,0 100%);
    clip-path: polygon(0 6%,100% 0,100% 94%,0 100%);
    height: 90%;
    width: 100%;
    background: linear-gradient(rgba(255,60,50,.95),rgba(255,60,50,.95)),url(../img/edcamp-bogota-2017.jpg) center 40%/cover no-repeat;
    position: absolute;
    top: 5%;
}

Ahí se está usando la propiedad css clip-path, que, como se describe, recorta el div de fondo:

La propiedad CSS clip-path previene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte específica del elemento se mostrará.

Cada valor pasado a polygon dentro de clip-path, marcará la coordenada de un vértice del polígono, en este caso:

clip-path: polygon( esquinaSuperiorIzquierda (x, y),
                    esquinaSuperiorDerecha (x, y),
                    esquinaInferiorDerecha (x, y),
                    esquinaInferiorIzquierda (x, y) );

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.