Good afternoon, someone, could you please explain to me how to do this effect on the sloping background, or slope, depending on the way you look at yourself. I tried the inspect in the page, but I can not see how this effect is done, if it is an image with the color already this way, or if the divs are with one side bigger than another ... obg from here
There are several ways to do this.
You can use div with the gradient background. (I recommend)
Background: linear-gradient (Ângulo, cor comprimento, cor comprimento, cor comprimento)
Follow the example below.
* {margin:0;padding:0}
html, body {
height: 100%;
width: 100%;
}
body {
background-image: linear-gradient(
160deg,
blue 65%,
black 65%);
}If you have trouble creating a gradient, simply use the link
You can also use two div . Just use transformt: rotate(Ângulo) and some values to change the length. (Do not recommend)
html,body, #container, .azul, .preto {
width:100%;
height: 100%
}
#container {
overflow:hidden;
}
.azul {
background: blue
}
.preto {
background: black;
transform: rotate(165deg);
margin-top: -157px;
margin-left: 20px;
width: 150%;
}<div id="container">
<div class="azul"></div>
<div class="preto"></div>
</div>Or you can use images.
background-image: url('Link da imagem');
background-size: cover; /* Informa para a imagem cobrir todo o elemento */
background-repeat: no-repeat /* Informa para não repetir a imagem. */
Example:
body {
background-image: url('https://i.stack.imgur.com/OoXOC.png');
background-size:cover;
background-repeat: no-repeat
}I entered the site of outlook, this effect is a background image inside a div, it can be in the formats svg, png, jpg, the detail is that it needs to be at least 1920px wide to support most resolutions.
Just generate the image and put it as background: url ();
You can also do this using transform: rotate (180deg);
But in this case it is a bit more complicated because you have to have a div holding the other that will have the rotation and you will need some more settings.