0

Bom tenho uma div box2-1 que tem o width em 100%. Quero criar uma div box2-2 que tenha o width em 100%, porém que manter o background com duas cores, para ter um efeito de uma div torta. Alguém pode me ajudar?

Segue o código. O problema e que não estou conseguindo colocar a div box2-2 com width em 100%.

.box2-1 {
    width: 100%;
    height: 500px;
    background-color: #FF895B;
}
.box2-2 {
    border-right-width: 899px;
    border-right-style: solid;
    border-right-color: rgb(255, 137, 91);
    bottom: -60px;
    border-bottom: 60px solid transparent;
}
<div class="box2-1">
            
        </div>
        <div class="box2-2"></div>

Exemplo da div que quero criar: inserir a descrição da imagem aqui

7
  • Você quer fazer algo como o gradiente?
    – Marconi
    20/04/2017 às 13:57
  • Hugo, poderia por gentileza fazer um esboço de como ficaria essa div torta, pode ser no paint mesmo, só para ter uma ideia melhor de como te ajudar...
    – Mathiasfc
    20/04/2017 às 13:58
  • se vc colocar 605px ela fica certa aqui... mas nao vai funcionar no seu site provavelmente ...
    – andrepaulo
    20/04/2017 às 13:58
  • @Marconi isso mesmo que eu estou querendo. 20/04/2017 às 14:06
  • @HugoBorges, não precisa de duas divs para fazer um gradiente...
    – Mathiasfc
    20/04/2017 às 14:08

2 Respostas 2

3

Essa é a idéia: Você pega o width da div 2-1 e aplica à borda da div 2-2. mesmo que o usuário redimensione a tela, você não vai perder o efeito, pois ele está linkado ao window.resize tb.

Não sei se é a melhor forma de fazer, mas funciona.

function adjustBorder(){
  var div1Width = $('.box2-1').width();
  $('.box2-2').css('border-right-width', div1Width+ 'px');
}

window.onresize = function(event) {
  adjustBorder();
}

adjustBorder();
.box2-1 {
    width: 100%;
    height: 500px;
    background-color: #FF895B;
}
.box2-2 {
    border-right-width: 899px;
    border-right-style: solid;
    border-right-color: rgb(255, 137, 91);
    bottom: -60px;
    border-bottom: 60px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box2-1">
            
</div>
<div class="box2-2"></div>

2
  • 1
    +1 "Não sei se é a melhor forma de fazer" kkk, mas a ideia é boa!
    – Mathiasfc
    20/04/2017 às 14:22
  • 1
    Bom funcionou, mas não sei se dessa forma é a melhor. Acho que em CSS da para resolver. +1, se ninguém postar uma solução melhor eu marco como resolvido ok. 20/04/2017 às 14:24
1

A melhor forma que achei foi assim:

.box2 {
  background-color: #FF895B;
  position: relative;
  height: 500px;
}
.box2:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(1.5deg);
  transform-origin: 0%;
}
<!-- Box 2 -->
        <div class="box2">
            
        </div>

Fonte: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

1
  • poutz man ... mandou bem ... eu tava tentando algo com skew mas nao cheguei a tentar o skew-y... +1
    – andrepaulo
    20/04/2017 às 21:40

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 .