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.
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.
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) );
clip-path: polygon(x1 y1, x2 y2, x3 y3, x4 y4);
que recorta/enmascara el fondo developer.mozilla.org/en-US/docs/Web/CSS/…