1

Boa tarde pessoal, alguem poderia me explicar por favor, como se faz esse efeito no background em declive, ou aclive, dependo do modo de se olhar.. kkk tentei das inspect na pagina, mas nao conseguir ver como é feito esse efeito, se é um imagem com as cores ja desse modo, ou se das divs estao com um lado maior q outro... obg desde ja

inserir a descrição da imagem aqui

2 Respostas 2

1

Há várias maneiras de fazer isso.

Você pode usar uma div com o fundo em gradiente. (Recomendo)

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

Segue exemplo abaixo.

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

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

Caso você tenha dificuldades em criar um gradiente, basta utilizar o site https://www.cssmatic.com/gradient-generator

Você também pode utilizar duas div. Basta utilizar transformt: rotate(Ângulo) e alguns valores para alterar o comprimento. (Não recomendo)

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>

Ou você pode utilizar imagens.

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. */

Exemplo:

body {
  background-image: url('https://i.stack.imgur.com/OoXOC.png');
  background-size:cover;
  background-repeat: no-repeat
}

5
  • muito obg amigo, vou testar aqui e ver como fica, obg mesmo!!
    – cleiton
    16/02/2018 às 17:44
  • Só complementando a resposta, pra deixar claro ali no site, foi usado uma imagem de fundo já pronta. Por isso não foi achado nada referente. Parabéns pela explicação.
    – John-Jones
    16/02/2018 às 17:44
  • amigo, saberia me dizer o nome desse estilo?? pra eu pesquisar mais sobre isso? por favor
    – cleiton
    16/02/2018 às 17:47
  • @John-Jonesentendi, muito obggg
    – cleiton
    16/02/2018 às 17:48
  • O primeiro Exemplo, funcionou certinho!! obg
    – cleiton
    16/02/2018 às 17:56
0

Entrei no site do outlook, esse efeito é uma imagem um fundo dentro de uma div, pode ser nos formatos svg, png, jpg, o detalhe é que ela precisa ter no mínimo 1920px de largura para suportar a maioria das resoluções.

É só gerar a imagem e colocar como background: url();

Também é possível fazer esse efeito usando o transform: rotate(180deg);

Mas nesse caso é um pouco mais complicado porque tem q ter uma div segurando a outra que terá a rotação e será necessário algumas configurações a mais.

1
  • entendi, muito obg amigo.
    – cleiton
    16/02/2018 às 17:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .