Divs background with a larger side q other

Asked

Viewed 152 times

1

Good afternoon guys, could someone please explain to me how this effect is done on the slope background, or slope, depending on how you look.. kkk I tried the results on the page, but I can’t see how this effect is done, if it is an image with the colors already this way, or if the results are with a bigger side q other... obg since already

inserir a descrição da imagem aqui

html jquery css bootstrap

2 answers

1


There are several ways to do this.

You can use a div with the bottom in gradient. (Recommend)

Background: linear-gradient (Ângulo, cor comprimento, cor comprimento, cor comprimento)

Below is an example.

* {margin:0;padding:0}
html, body {
  height: 100%;
  width: 100%;
}

body {
  background-image: linear-gradient(
    160deg,
    blue 65%,
    black 65%);
}

If you have difficulties creating a gradient, just use the site https://www.cssmatic.com/gradient-generator

You can also use two div. Just use transformt: rotate(Ângulo) and some values to change the length. (I 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
}

  • very obg friend, I’ll test here and see how it looks, obg even!!

  • Just complementing the answer, to make it clear there on the site, was used a background image already ready. That’s why nothing related was found. Congratulations on the explanation.

  • Friend, could you tell me the name of this style?? so I can do some research on it? Please

  • @John-Jonesentendi, very obggg

  • The first example, it worked right!! obg

0

I entered the outlook site, this effect is an image a background within a div, can be in the svg, png, jpg formats, the detail is that it needs to be at least 1920px wide to support most resolutions.

Just generate the image and put as background: url();

It is also possible to do this effect using Transform: Rotate(180deg);

But in this case it is a little more complicated because it has q have a div holding the other that will have the rotation and will need some more settings.

  • Got it, very obg friend.

Browser other questions tagged html jquery css bootstrap

You are not signed in. Login or sign up in order to post.