Polygonal Divs - Faire déborder le contenu dans une forme spécifique?

Question

Voici le site je travaille actuellement sur: http://willcrichton.net/

Si vous cliquez sur les flèches de chaque côté de l'hexagone au milieu, vous pouvez voir que les transitions gauche et à droite en utilisant jQuery + Cycle + jQuery jQuery Easing. Cependant, vous pouvez également voir qu'il est plutôt moche - parce que j'utilise des hexagones et non des carrés et parce que les divs sont de forme carrée, l'hexagone de contenu chevauche avec l'arrière-plan d'une manière désagréable. Donc, ma question est: comment pourrais-je pirater un div dans un hexagone? Cet hexagone doit avoir la même taille/forme que le contenu div, et lorsque le contenu est en dehors de la zone de l'hexagone, il doit être invisible.

Edit:

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; 
    }

MISE À JOUR: Si vous consultez le site maintenant, vous verriez ma tentative a échoué à l'aide de la "fenêtre" méthode et vous pouvez voir pourquoi l'index z n'a pas fonctionné.

Answer 1

Vous ne pouvez pas créer de div dans un hexagone, mais vous pouvez utiliser des fichiers PNG avec des transparents alpha pour masquer la zone souhaitée. Donc, vous auriez besoin de faire quatre divs, chacun avec un fond qui a un fichier PNG avec la transparence qui agit comme un masque. Ces divs seraient positionnés absolument sur votre div avec le curseur.

EDIT: Comme Pekka l'a noté ci-dessous, cela peut également être fait avec un seul fichier PNG de grande taille agissant comme un masque.

EDIT # 2: En regardant le code affiché, je réviserait comme ceci:

<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> 

Notez que je fermais l'élément <div id="content">. Cet élément doit être un frère de vos diapositives, mais être placé au-dessus des diapositives avec un index z plus élevé. Ou, vous devrez peut-être créer un nouvel élément dédié à l'affichage du masque, si votre div "content" est utilisé à d'autres fins que l'affichage du masque.

Answer 2

Si elle me mettait au point, je voudrais faire ce lien à deux couches de la vôtre, dans une couche d'arbre ...

ex:

1. couche avec l'arrière-plan existant

2. couche avec l'hexagone gris

3. couche avec les mots environnants et l'arrière-plan entourant

Comme ça, lorsque vous cliquez sur les flèches gauche et droite, l'hexagone gris me glisser au milieu des 1. et 3. couches, empêchant ainsi que la laideur que vous avez mentionné :)

Espérons que ça aide!

Answer 3

Le concept et la démo d'Eric Meyer curvelicious pourraient vous orienter dans la bonne direction. C'est un hack compliqué des "premiers jours de CSS", mais c'est une technique puissante.