Diaporama clip 2

Même principe que le montage précédent mais avec des triangles au lieu de ronds, par le site: ICI.
Clic sur les boutons.
Pour le navigateur Firefox, ce sera des rectangles !
J'ai voulu vérifier que l'on pouvait personnaliser le code que j'ai indiqué.

<div id="ancres" style="width: 800px; height: 600px; margin: 10px auto; border:6px ridge white;"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a> <a id="lien5" class="ancre"></a> <a id="lien6" class="ancre"></a>
<p id="tr0"><a href="#lien"><img src="http://ekladata.com/Chii0wI_EollV37evuA4sBLk8n8/btd.png" alt="" /></a></p>
<p id="tr1"><a href="#lien1"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr2"><a href="#lien2"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr3"><a href="#lien3"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr4"><a href="#lien4"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr5"><a href="#lien5"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr6"><a href="#lien6"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="img0" style="background: url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); background-size: contain;">&nbsp;</p>
<p id="img1"><img src="http://ekladata.com/8UkTtUnueDu3w_x8Uh1A7opie04/DSCN6347f.jpg" alt="" /></p>
<p id="img2"><img src="http://ekladata.com/SGgdarXU6BD_HxIMiTxAeDsdMWk/DSCN6350f.jpg" alt="" /></p>
<p id="img3"><img src="http://ekladata.com/AO6UCtvluIZfj7IpruN9aLXVeyM/DSCN6351f.jpg" alt="" /></p>
<p id="img4"><img src="http://ekladata.com/WiH6K1d5TUifSSUVddDHoGeiadU/DSCN6353f.jpg" alt="" /></p>
<p id="img5"><img src="http://ekladata.com/oaOtAHIAqADKdseiln9XD81mGDc/DSCN6356.jpg" alt="" /></p>
<p id="img6"><img src="http://ekladata.com/956QtHyTtbEHvOai2k3DDYgh1WM/DSCN6358f.jpg" alt="" /></p>
</div>
<style type="text/css"><!--
#ancres a.ancre{display: none;}
#tr0{transform:translate(20px,20px);position:absolute;z-index:15;}
#tr1{position:absolute;z-index:10;transform:translate(20px,70px);}
#tr2{position:absolute;z-index:10;transform:translate(20px,120px);}
#tr3{position:absolute;z-index:10;transform:translate(20px,170px);}
#tr4{position:absolute;z-index:10;transform:translate(20px,220px);}
#tr5{position:absolute;z-index:10;transform:translate(20px,270px);}
#tr6{position:absolute;z-index:10;transform:translate(20px,320px);}

#img0{width:800px;height:600px;position:absolute;}
#img1{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); transform: translate(-200px,-150px) scale(0.4) rotate(0deg); transition: all 2s ease;}
#img2{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); transform: translate(0px,-100px) scale(0.4) rotate(45deg); transition: all 2s ease;}
#img3{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); transform: translate(-150px,50px) scale(0.4) rotate(30deg); transition: all 2s ease;}
#img4{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); transform: translate(120px,-180px) scale(0.4) rotate(-45deg); transition: all 2s ease;}
#img5{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); transform: translate(160px,20px) scale(0.4) rotate(-30deg); transition: all 2s ease;}
#img6{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%); transform: translate(50px,50px) scale(0.4) rotate(-40deg); transition: all 2s ease;}

#ancres a#lien1:target ~ #img1{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien2:target ~ #img2{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien3:target ~ #img3{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien4:target ~ #img4{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien5:target ~ #img5{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
#ancres a#lien6:target ~ #img6{ z-index:12;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); transform:scale(1);}
--></style>

Les adresses du fond et des images sont en rouge/gras; les boutons sont personnels et peuvent être remplacés; la taille des triangles est paramétrée par scale(0.4) et leur positionnement par transform:translate(0px,0px); rotation par rotate(0deg); transition de 2 secondes.