Divs poligonales: ¿hacer desbordamiento de contenido en una forma específica?

Question

Aquí es el sitio Actualmente estoy trabajando en: http://willcrichton.net/

Si hace clic en las flechas en cada lado del hexágono en el medio, se puede ver que las transiciones izquierda y derecha utilizando jQuery Cycle + + jQuery jQuery Easing. Sin embargo, también puedes ver que es bastante feo, porque estoy usando hexágonos y no cuadrados, y como los divs tienen forma cuadrada, el contenido del hexágono se superpone con el fondo de una manera desagradable.

Entonces, mi pregunta es: ¿cómo podría piratear un div en un hexágono? Ese hexágono debe ser del mismo tamaño/forma que el contenido div, y cuando el contenido está fuera del área del hexágono debe ser invisible.

Editar:

HTML

<div id="content"> 
<div class="slide"> 

    <a href="#"><div class="arrow left"></div></a> 
    <a href="#"><div class="arrow right"></div></a> 

    <div id="websites-title"></div> 
    <div class="website"> 

    </div> 
</div> 
<div class="slide"> 
    <a href="#"><div class="arrow left"></div></a> 
    <a href="#"><div class="arrow right"></div></a> 

</div></div> 


<script type="text/javascript"> 
    $("#content").cycle({ 
     fx: 'scrollHorz', 
     timeout: 0, 
     prev: ".left", 
     next: ".right", 
     easing: "easeInOutBack" 
    }); 
</script> 

CSS

/* Container styles */ 

#container { 
    width: 908px; 
    height: 787px; 
    left: 50%; 
    top: 50%; 
    position: absolute; 
    margin-top: -393.5px; 
    margin-left: -452px; 
    background-image: url("images/background.png"); 
    font: 12px "Lucida Sans Unicode", "Arial", sans-serif; 
    z-index: 3; 
}  

#content { 
    width: 686px; 
    height: 598px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: -282px; 
    margin-left: -343.5px; 
    /*background-image: url("images/hacky_hole2.png");*/ 
    z-index: 1; 
} 

    .slide { 
     width: 100%; 
     height: 100%; 
     background-image: url("images/content.png"); 
     position: relative; 
     z-index: 2; 
    }

ACTUALIZACIÓN: Si marca el sitio ahora, vería mi intento fallido en el uso de la "ventana" método y puede ver por qué el índice Z no funcionó.

Answer 1

No puede hacer un div en un hexágono, pero podría usar archivos PNG con transparencias alfa para enmascarar el área que desea. Entonces, necesitarías hacer cuatro divs, cada uno con un fondo que tenga un archivo PNG con la transparencia que actúa como una máscara. Estos divs se posicionarían absolutamente sobre su div con el control deslizante.

EDITAR: Como señaló Pekka a continuación, esto también podría hacerse con un único archivo PNG grande que actúa como máscara.

editar # 2: Mirando el código que envió, yo revisaría así:

<div id="content"></div> 
<div class="slide"> 

    <a href="#"><div class="arrow left"></div></a> 
    <a href="#"><div class="arrow right"></div></a> 

    <div id="websites-title"></div> 
    <div class="website"> 

    </div> 
</div> 
<div class="slide"> 
    <a href="#"><div class="arrow left"></div></a> 
    <a href="#"><div class="arrow right"></div></a> 
</div> 

Tenga en cuenta que cerraba el elemento <div id="content">. Este elemento debe ser un hermano de tus diapositivas, pero debes colocarlo encima de las diapositivas con un índice Z más alto. O bien, es posible que necesite crear un nuevo elemento dedicado a mostrar la máscara, si su div "de contenido" se usa para otros fines aparte de solo mostrar la máscara.

Answer 2

Si se me desarrollando, me gustaría hacer que enlazan dos capas de los suyos, en una capa de árboles ...

ejemplo:

1. capa con el fondo existente

2. capa con el hexágono gris

3. capa con las palabras de los alrededores y el fondo que rodea

Al igual que, cuando se hace clic en las flechas izquierda y derecha, el hexágono gris me van deslizando en medio de las capas 1. y 3., evitando así que la fealdad que has mencionado :)

Espero que ayude!

Answer 3

El concepto y demo de Eric Meyer's curvelicious pueden apuntarle en la dirección correcta. Es un truco complicado de los "primeros días de CSS", pero es una técnica poderosa.