Bonjour,
Je suis actuellement confronter à un problème pour réaliser un hexagone en css3 donc je pense peut être me tourner vers le SVG.
Suite à mes différentes recherche je n'arrive pas à trouver se que je souhaite. J'aimerais réaliser un hexagone comme sur se site http://gorohov.name/
Je voudrais réaliser un hexagone en css3 ou SVG ou il serait possible d’effectuer différent changement :
-
- Ajout si on le souhaite d'une bordure
-
- Ajout si on le souhaite d'une ombre
-
- Ajout si on le souhaite d'une image, texte, icon ou animation css3 à l'intérieur de l'hexagone
-
- Rendre l'hexagone responsive avec une taille en %
-
- Le rendre un maximum compatible avec le plus de navigateur possible
Suite à mes différentes recherches j'ai trouver la possibilité de faire un hexagone avec et sans bordure mais il met impossible de mettre une image à l'intérieur (balise img pour le référencement) qui prend tous l'hexagone et pas que le centre juste ou avec la propriété transforme mais impossible de mettre une bordure.
C'est pourquoi je me demande si cela ne serait pas mieux en SVG?
<u><strong>Voici un hexagone avec la propriété transform :</strong></u>
// HTML
<div class="hexagon4">
<a href="#">
<img src="http://www.gravatar.com/avatar/08e1d4d4207717923ae1835880c06df4?s=47&d=http%3A%2F%2Fwww.techrepublic.com%2Fbundles%2Ftechrepubliccore%2Fimages%2Ficons%2Fstandard%2Ficon-user-default.png" alt="" style=""/></a>
</div>
// CSS
.hexagon4 {
display: inline-block;
overflow: hidden;
width: 20em; height: 20em;
transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.hexagon4 a {
display: block;
height: 100%;
transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866);
background: gainsboro;
}<u><strong>Voici un hexagone avec les bordures :</strong></u>
// HTML
<div class="shape-hexagone">
<a href="#">
<img src="http://www.gravatar.com/avatar/08e1d4d4207717923ae1835880c06df4?s=47&d=http%3A%2F%2Fwww.techrepublic.com%2Fbundles%2Ftechrepubliccore%2Fimages%2Ficons%2Fstandard%2Ficon-user-default.png" alt="" style="width:128px;"/></a>
</div>
// CSS
.shape-hexagone{
width: 100px;
height: 55px;
position: relative;
}
.shape-hexagone:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #cdabef;
}
.shape-hexagone:after {
content: "";
position: absolute;
bottom: -25px; left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #cdabef;
}Auriez-vous des aides ou conseilles pour mon problème?
5 réponses
Tu peux utiliser du svg mais le soucis c'est qu'il n'est pas encore tout à fait bien supporté par les navigateurs.
Moi j'ai une idée de scenario en javascript, tu a le droit de prendre en compte ou pas... L'idée est de faire une boucle pour décaler l'image soit vers la gauche ou soit vers la droite en fonction de l'endroit où se trouve l’image.
-
Intégrer toute les images sur le même axe (visibility: hidden);
-
Définir un décalage par défaut (0 par exemple)
-
A chaque image, le décalage sera redéfini avec le calcul suivant : décalage courant + (largeur image / 2). On applique le décalage à l’élément et on redéfinis le décalage par défaut avec la valeur du calcul. On en profite à chaque fois pour appliquer un css (visibility: visible) sur l'image .
Pour le décalage tu peut utiliser une margin-left positive ou négative.
Salut,
Merci de ton aide. en faite se que j'aimerais faire c'est pas vraiment la grille en hexagone (même si je vais en faire une pour la partie portfolio).
Se que j'aimerais faire c'est un hexagone avec les coins arrondies et transparent au milieu.
J'ai pu le faire bien entendu avec photoshop mais je me suis dit avec toute les techniques d'aujourd'hui il doit pouvoir y avoir un moyen de le faire soit à l'aide de css3 ou SVG.
Après j'ai vu que la librairie raphael.js on pouvais peut être le faire mais cela me rajouterais une librairie en plus que je n'utiliserais pas au complet juste pour faire un hexagone se qui est pas très logique (à mon avis).
Je sais pas du tous si mon problème peut être résolu mais j'aimerais bien savoir si cela est possible.
Je te remercie en tous cas pour ta proposition je l'utiliserais peut être si je ne trouve pas d'autre moyen.
Je crois que j'ai une solution je vais tester et je te dis si ca marche.
Edit :
J'ai fiat un truc qui marche pas mal, mais :
- L'effet box-shadow est imposssible,
- Les bordures ne fonctionne pas sur les coins,
- L'image fonctionne nickel, mais elle doit être de ratio 1:1 (carré),
- Comptabilité navigateur, j'ai utilisé pseudo-element (:after,:before), transform: translate, rotate.
Voila voila.
Un lien de demo : Hexagon mask
En effet c'est très jolie :D, sa avance pas mal. merci pour ton aide ;)
Mais j'aimerais vraiment pouvoir ajouter un border-radius et un box-shadow mais sa ma permis déja de trouver grace à ton exemple que l'on est pas loin :)
Après j'ai vu qu'il y avais les clip-path en css3 ou l'on pouvais définir un hexagone en svg qui serait un masque devant les images mais tous les exemple trouver impossible de le faire fonctionner avec le dernier firefox. Car je pourrais utiliser :
clip pour les ancien navigateur et clip-path pour les nouveaux mais en test pour le moment car impossible de le fair fonctionner mais sa avance déja c'est pas mal ;)
merci encore pour ton aide.
Si tu à déja utiliser clip-path ou des tuyaux je suis preneur ;)
J'avais trouvé le mask hexa sur stackoverflow. J'ai fait la bordure avec une tite duplication + augmentation de taille. J'ai essayé de faire une ombre portée mais ça pas kl'air d'être prix en compte sur firefox (chrome ok).