Compatibilité de l'Hexagone sans les ombres.
Les propriétés CSS qui sont utilisées dans le code CSS sont reconnues par une majorité de navigateurs.
Générateur de code Css faire un Hexagone
Code CSS pour faire un hexagone en Css.
.hexagone {
position : relative;
/* Pour rendre responsive mettre width à 100% */;
width: 173.20508px;
visibility: hidden;
overflow : hidden;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
filter : drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}
.hexagone::after {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing : content-box;
content: "";
display: block;
margin-top: 28.86751%;
padding-bottom: 86.602%;
}
.hexagone .hexagonemain{
display: block;
position: absolute;
width: 100%;
padding-bottom: 115.47005%;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
-ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
z-index: 1;
}
.hexagone .hexagonemain:before{
content: "";
display: block;
position: absolute;
visibility: visible;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
background-color : #cccccc;
-webkit-transform : skewY(-30deg) rotate3d(0, 0, 1, 60deg);
-ms-transform : skewY(-30deg) rotate3d(0, 0, 1, 60deg);
transform : skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}
/*
LE CODE HTML
<div class="hexagone"><div class="hexagonemain"></div></div>
*/
Compatibilité du code Css de l'hexagone avec les navigateurs.
Compatibilité de la propriété Css filter Css avec les navigateurs
Je sépare la compatibilité de la propriété préfixée -webkit- de la propriété Css W3c. La compatibilité dépendra aussi de la compatibilité de fonction Css que l'on veut utiliser.