4

Essa está sendo difícil, e vou explicar o porquê, tenho duas divs como no print abaixo, o site é responsivo, elas devem flutuar lado a lado, porém, essas divs têm pontas triangulares, e elas devem escalar horizontalmente até determinado breakpoint que eu determinar, no caso, a div da cor vermelha em telas pequenas xs: 320px teria largura de 100% e a segunda eu iria ocultar. mas em telas grandes lg: 1200px, teriam de ficar da forma que está no print, mas não quero que quebre caso o monitor seja um pouco menor que 1200.

Já tentei de algumas formas aqui mas o bloco escuro sempre quebra.

Gostaria de sugestões.

Vejam o código que fiz: http://codepen.io/leandroruel/pen/OyJErX

blocos lado a lado triangulares do inferno, thanks para o designer

3
  • Sugestão: poste o codigo que tens para podermos testar e fazer os ajustes necessários 1/09/2015 às 17:39
  • dá uma olhada agora amigo. 1/09/2015 às 18:17
  • Quando diz que não quer que ele quebre quer que ele suma ou fique a direita do bloco vermelho? ( já tenho ele pronto só falta esse detalhe e eu posto como resposta ) 1/09/2015 às 19:11

1 Resposta 1

2

Vou postar como resposta mas não sei se quer que o bloco branco fique oculto ou fique a direita do bloco vermelho então qualquer coisa você me comenta abaixo que eu edito a resposta

<style>
    body {
  padding: 0;
  margin: 0;
  background: #242424;
}

.container {
  max-width: 980px;
  margin: 0 auto;
}

.banner {
  background: url(http://www.citygop.org/wp-content/uploads/2015/02/city-wallpaper-7.jpg) no-repeat 0 50%;
  height: 400px;
  position: relative;
}

.banner-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.banner-title {
  display: inline-block;
  height: 55px;
  background: #F64444;
  font-family: arial, sans-serif;
  font-size: 15px;
  color: #fff;
  text-transform: uppercase;
  text-align: right;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
}

.banner-title:before {
  content: '';
  display: block;
  height: 100%;
  width: 500%; /* i hate it */
  position: absolute;
  top: 0;
  left: -500%;
  background: #f64444;
}

.banner-title:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-width: 55px 60px 0 0;
  border-style: solid;
  border-color: #f64444 transparent;
  position: absolute;
  top: 0;
  right: -60px;
}



.banner-title02:before {
    border-color: white transparent;
    border-style: solid;
    border-width: 0 0 55px 60px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 129px;
    top: 0;
    width: 0;
}
.banner-title02 {
  color: black;
  display: inline-block;
  height: 55px;
  background: white;
  font-family: arial, sans-serif;
  font-size: 15px;  
  text-transform: uppercase;
  text-align: right;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
  right: -57px;
}
.banner-title02:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-width: 55px 60px 0 0;
  border-style: solid;
  border-color: white transparent;
  position: absolute;
  top: 0;
  right: -60px;
}



.banner-title03::before {
    border-color: #5e3633 transparent;
    border-style: solid;
    border-width: 0 0 114px 120px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 603px;
    top: -9px;
    width: 4px;
}
.banner-title03 {
    background: #5e3633 none repeat scroll 0 0;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font-family: arial,sans-serif;
    font-size: 11px;
    height: 105px;
    padding: 15px;
    position: relative;
    right: -112px;
    text-align: left;
    text-transform: uppercase;
    top: -4px;
    width: 63%;
}


@media screen and (max-width: 980px) {
  .banner-title, .container { width: 100%; }  
  .banner-title:before, .banner-title:after { display: none; }
  .banner-title02:before, .banner-title02, .banner-title02:after { display: none; }
  .banner-title03:before, .banner-title03 { display: none; }
}
</style>
<div class="banner">
  <div class="banner-header">
    <div class="container">
        <div class="banner-title">products</div>        
        <div class="banner-title02">Linha Racing</div>
        <div class="banner-title03">Terceiro bloco Coloque seu texto aqui</div>
    </div>
      
  </div>
</div>

Aqui no site ele não abre o tamanho desejável então dei um fork no seu codepen e fiz outro

Edit: Atualizei o codepen

3
  • é...falta o bloco escuro, se você conseguir me mostrar um modo dele ficar lado a lado também e sumir em 320px 1/09/2015 às 20:36
  • Amanhã eu édito então, agora to no celular... 2/09/2015 às 0:08
  • @user3632930 esta atualizado o código no codepen também 2/09/2015 às 11:43

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 .