How to create a background that is not square?

Question

How to create a background that is not square?

Navigation

#1 by (1 votes)

1

I want to create a sloping background to make my site more attractive in general.

A pretty clear example is the red background that has this site '' link ''.

Enter your css code but I can not find where you put that fund.

html css

asked by Michael Steeven Vanegas Salaza 26.06.2018 в 20:35

source

1 answer

Convert DbSetT to different data type in EF - Linq Convert SQL query to Eloquent Laravel 5.6

score 1 · Accepted Answer

So inspecting the code, they have the following:

.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%;
}

That's where the css property is being used clip-path , which, as describe, cut out the background div:

The CSS property clip-path prevents a portion of an element from being show by defining a cropping region to be displayed, that is, Only a specific part of the item will be displayed.

Each value passed to polygon within clip-path , will mark the coordinate of a vertex of the polygon, in this case:

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