Foros del Web - Ver Mensaje Individual - Duda con overflow y div irregular con Bordes

JustinKO · #1 (**permalink**) 01/08/2015, 10:30

Buenas tardes a todos,

Estoy con el típico quebradero de cabeza que seguro que es una tontería pero no doy con ello. Os cuento:

Quiero que mi web esté dividida en bloques horizontales pero que sus partes superior e inferior no sean paralelas.

Lo estoy intentando creando los divs contenedores normales, y entre medias, superpuestos, otros divs blancos pero con formas estilo css-trips "Shapes of CSS" , dando así la impresión de que son los divs contenedores los que no llevan sus lados paralelos.

Todo funciona correctamente hasta que quiero que me ocupe todo el ancho de la página.
Como no me permite hacer un border-witdh de 100% solo le puedo dar una cantidad de pixel muy alta para que siempre llegue al ancho, y después, crear un wrapper que lo envuelva con overflow hidden para que no sobrepase el ancho de la ventana y me cree un scroll horizontal con el div que sobra por los lados. Pero por alguna razón no me funciona el overflow hidden.

Dicho así parece un poco lioso, pero viendo el código sabréis a lo que me refiero.

Código HTML:

Ver original<body>
  <div class="wrapper">
 
    <div class="seccion rojo">
    </div>
 
  <!-- Separador --> 
    <div class="wrapper-franja-distr">
      <div class="franja-distr1">
      </div>
    </div><!-- Cierre separador --> 
 
    <div class="seccion verde">
    </div>
 
  <!-- Separador --> 
    <div class="wrapper-franja-distr">
      <div class="franja-distr1">
      </div>
    </div><!-- Cierre separador -->
 
    <div class="seccion violeta">
    </div>
 
 
  </div>
</body>

Código CSS:

Ver original*{
  margin: 0;
}
.wrapper{
  width: 100%;
}
.seccion{
  width: 100%;
  height: 300px;
  margin: 0;
  
}
.rojo{
  background-color: red;
}
.verde{
  background-color: green;
}
.violeta{
  background-color: violet;
}
 
.wrapper-fanja-distr{
  width: 100%;
  overflow: hidden;
 
}
.franja-distr1 {
  border-left: 2000px solid #fff;
    border-top: 19px solid transparent;
    height: 60px;
    border-bottom: 22px solid transparent;
    margin-top: -30px;
    margin-bottom: -30px;
    position: relative;
    z-index: 1000
}

AQUÍ o paso el link con las pruebas hechas

haced scroll hacia un lado y veréis lo que os digo.

También he hecho el mismo efecto de la misma manera pero con una forma svg en medio en vez de un div con CSS, pero este otro método me parece menos elegante y más "pesado" y me gustaría utilizar el que os cuento en el código

¿sabéis qué puede estar pasando que no me coge el overflow hidden?
Si se os ocurre otra manera de hacerlo os lo agradeceré muchísimo, así aprenderé.

Un saludo y gracias de antemano