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?