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