[SOLUCIONADO] 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

pzin · #2 (**permalink**) 01/08/2015, 13:36

Tienes puesto wrapper-fanja-distr en lugar de wrapper-franja-distr en tu CSS.

Yo lo hubiese llamado franja, a secas. No veo porqué ponerle apellidos a todo. Luego dificulta encontrar estos fallos.

JustinKO · #3 (**permalink**) 02/08/2015, 03:21

Madre mía!!! No me lo puedo creer que sea tan tonto el fallo!! como es la primera vez que uso lo de crear formas con bordes, me centré tanto en eso e hice pruebas de todo tipo pensando que de ahí venía el problema, que me olvidé de lo más básico.

Disculpadme el haber abierto un tema por una cosa tan tonta, pero de verdad antes de postear algo, le doy muchísimas vueltas.

Muchas gracias una vez más pzin, y tienes toda la razón con lo de los "apellidos" es complicarse innecesariamente. Seguiré tu consejo ;)

(espero que por lo menos le sirva a alguien el ejemplo)

Saludos!!!!

pzin · #4 (**permalink**) 02/08/2015, 09:30

Cita:

Iniciado por JustinKO

Madre mía!!! No me lo puedo creer que sea tan tonto el fallo!! como es la primera vez que uso lo de crear formas con bordes, me centré tanto en eso e hice pruebas de todo tipo pensando que de ahí venía el problema, que me olvidé de lo más básico.

Bueno, yo tardé un rato en descubrirlo también. Hasta que no vi con el devtools que no se aplicaban los estilos a la clase no caí.

Otra forma de hacer eso, por cierto, es usando un elemento cuadrado (o sea, cualquiera cosa) y aplicarle una transformación 2D, rotándolo.

JustinKO · #5 (**permalink**) 02/08/2015, 14:00

Gracias, he estado mirando lo que dices, y para este caso concreto me lía mucho la cosa, pero me ha venido muy bien verlo así lo tengo para la próxima.
Muchas gracias de nuevo :)

Un saludo!