Comment puis-je maintenir les limites appropriées sur les triangles CSS lorsque survoler avec le curseur?

—– Version 2, plus propre, meilleure (corrige les problèmes IE et FF) —–

Problèmes corrigés:

1. IE a ignoré le overflow:hidden; La propriété et les événements flottants ont été déclenchés en dehors des triangles visibles.
2. Pour une raison quelconque, il y avait des lignes sur les triangles de Firefox.
3. Le curseur revient à la valeur par défaut si c'est entre les triangles.

La description :

Cette approche utilise skewX() pour créer les triangles. Vous n'avez pas besoin de «truc de bordure» pour les créer et vous n'avez pas besoin de la propriété de overflow non plus. Avec cette technique, il n'y a pas d'éléments chevauchants pour que les événements de survol ne puissent pas déclencher deux éléments en même temps.

Un second div divise la moitié de l'élément biaisé pour créer le triangle et est traduit avec celui-ci en survolant le sélecteur + CSS.

—– DEMO V2 —–

Marquage:

 <div class="t"> <div class="wrap"> <div class="triangle"></div> <div class="mask"></div> </div> <div class="wrap"> <div class="triangle"></div> <div class="mask"></div> </div> <div class="wrap"> <div class="triangle"></div> <div class="mask"></div> </div> <div class="wrap"> <div class="triangle"></div> <div class="mask"></div> </div> <div class="wrap"> <div class="triangle"></div> <div class="mask"></div> </div> <div class="wrap"> <div class="triangle"></div> <div class="mask"></div> </div> </div> 

CSS:

 .t div{ position:absolute; top:0; left:0; transform-origin:0 0; -ms-transform-origin:0 0; -webkit-transform-origin:0 0; transition:all 1s; -webkit-transition:all 1s; -moz-transition:all 1s; } .t .wrap{ top:50%; left:50%; -ms-transform: skewX(30deg); -webkit-transform: skewX(30deg); transform: skewX(30deg); } .t .wrap .triangle { position:relative; width: 200px; height: 173px; background-color: #0079c5; cursor:pointer; z-index:1; } .t .wrap .mask{ width:100%; height:115.5%; background-color: #fff; left:100%; z-index:2; -ms-transform: skewX(-30deg) rotate(30deg); -webkit-transform: skewX(-30deg) rotate(30deg); transform: skewX(-30deg) rotate(30deg); } .t .wrap .triangle:hover{ background-color: #009cff; transform: translate(10%, 10%); -webkit-transform: translate(10%, 10%); -moz-transform: translate(10%, 10%); } .t .triangle:hover + .mask{ -ms-transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0); -webkit-transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0); transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0); } .t > div:nth-child(2){ -ms-transform: rotate(60deg) skewX(30deg); -webkit-transform: rotate(60deg) skewX(30deg); transform: rotate(60deg) skewX(30deg); } .t > div:nth-child(3){ -ms-transform: rotate(120deg) skewX(30deg); -webkit-transform: rotate(120deg) skewX(30deg); transform: rotate(120deg) skewX(30deg); } .t > div:nth-child(4){ -ms-transform: rotate(-60deg) skewX(30deg); -webkit-transform: rotate(-60deg) skewX(30deg); transform: rotate(-60deg) skewX(30deg); } .t > div:nth-child(5){ -ms-transform: rotate(-120deg) skewX(30deg); -webkit-transform: rotate(-120deg) skewX(30deg); transform: rotate(-120deg) skewX(30deg); } .t > div:nth-child(6){ -ms-transform: rotate(-180deg) skewX(30deg); -webkit-transform: rotate(-180deg) skewX(30deg); transform: rotate(-180deg) skewX(30deg); } 

Vesrion 1 (original): violon pour démo V1

Voici une approche complètement différente. Cela évite complètement les problèmes de limites.

Il convient de noter que cette approche est relativement limitée quand il s'agit de réaliser l'effet de survol que vous avez mis en place. Je suis actuellement à la recherche d'alternatives.

EXEMPLE ICI – Fonctionne dans FF / Chrome, il échoue dans IE11.

HTML

 <div class="t"> <div class="clip"> <div class="triangle"></div> </div> <div class="clip"> <div class="triangle"></div> </div> <div class="clip"> <div class="triangle"></div> </div> <div class="clip"> <div class="triangle"></div> </div> <div class="clip"> <div class="triangle"></div> </div> <div class="clip"> <div class="triangle"></div> </div> </div> 

CSS

 .t { width:500px; height:500px; position:relative; } .t > .clip { overflow: hidden; position: absolute; width: 50%; height: 50%; -webkit-transform-origin: 100% 100%; } .t > .clip:first-child { -webkit-transform: rotate(60deg) skewY(30deg); } .t > .clip:nth-child(2) { -webkit-transform: rotate(120deg) skewY(30deg); } .t > .clip:nth-child(3) { -webkit-transform: rotate(180deg) skewY(30deg); } .t > .clip:nth-child(4) { -webkit-transform: rotate(240deg) skewY(30deg); } .t > .clip:nth-child(5) { -webkit-transform: rotate(300deg) skewY(30deg); } .t > .clip:nth-child(6) { -webkit-transform: rotate(360deg) skewY(30deg); } .triangle { width: 200%; height: 200%; -webkit-transform: skewY(-42deg) skewX(-20deg) rotate(-15.5deg); background:#0079c5; } .triangle:hover { background:#009cff; } 

J'ai réellement résolu le problème seul. À l'aide de JavaScript, j'ai configuré un événement de survoltage pour chaque triangle: Sur le vol stationnaire, j'ai configuré son propre index z à 20, l'index z du triangle suivant à 21 et tout le reste de l'index z de triangles à 19.

Le code ressemble à ceci:

  self.e.find(".t div").hover( function() { $(this).css({ 'z-index': 20, 'border-color': "transparent transparent "+self.params['colorSelected']+" transparent" }); if($(this).next().length) { $(this).next().css("z-index", 21); } else { self.e.find(".t div").first().css("z-index", 21); } }, function() { self.e.find(".t div").css({ 'z-index': 19, 'border-color': "transparent transparent "+self.params['color']+" transparent" }); }); 

La raison pour laquelle cela fonctionne, c'est parce que tous les triangles sont en ordre à partir de la partie supérieure gauche dans le sens des aiguilles d'une montre. Chaque triangle chevauche de manière incorrecte sa prochaine fratrie, alors qu'en amener la prochaine fratrie vers l'avant dans le plan z, elle permet de définir correctement les triangles.

Comparez ces deux JSFiddles, et vous verrez la différence dans le comportement de survoltage:

Non résolu: http://jsfiddle.net/2AXhR/

Résolu: http://jsfiddle.net/2AXhR/1/