Forme hexagonale avec bordure / contour

Voici une autre méthode pour créer des hexagones avec la bordure (ou le contour) en utilisant le clip-path fonctionnalité. Dans cette méthode, nous utilisons un élément conteneur et un pseudo-élément qui a des dimensions plus petites (à la fois height et width) que le conteneur. Quand même clip-path est appliqué aux deux éléments, le background-color de l'élément conteneur est vu derrière le pseudo-élément uniquement sur les bords et la fait ressembler à un border/contour à la forme.

les Avantages:

• les hexagones peuvent aussi avoir des gradients ou des images (essentiellement de couleur non solide) comme background.
• la forme est responsive et peut s'adapter automatiquement à tout changement dans les dimensions du conteneur.

.hexagon {
  position: relative;
  height: 150px;
  width: 150px;
  background: black;
}
.hexagon:before, .double:after {
  position: absolute;
  content: '';
}
.hexagon:before {
  top: 4px;  /* border width */
  left: 4px;  /* border width */
  height: calc(100% - 8px);  /* 100% - (2 * border width) */
  width: calc(100% - 8px);  /* 100% - (2 * border width) */
  background: #6c6;
}
.hexagon, .hexagon:before, .double:after {
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.image:before {
  background: url(http://lorempixel.com/150/150/nature/1);
}
.double:after {
  top: 8px;
  left: 8px;
  height: calc(100% - 16px);
  width: calc(100% - 16px);
  background: black;
}

/* Just for demo */

.hexagon {
  display: inline-block;
  margin: 20px;
}

<div class="hexagon"></div>
<div class="hexagon image"></div>
<div class="hexagon double"></div>

inconvénient majeur est le pauvre navigateur support à l'heure actuelle. CSS clip-path ne travaille pas dans IE et FF actuellement. Le problème avec FF peut être résolu en utilisant un SVG (en ligne ou externe) pour le clip-path (comme dans l'extrait de code ci-dessous):

.hexagon {
  position: relative;
  height: 150px;
  width: 150px;
  background: black;
}
.hexagon:before, .double:after {
  position: absolute;
  content: '';
}
.hexagon, .hexagon:before, .double:after {
  -webkit-clip-path: url(#hexagon-clip);
  clip-path: url(#hexagon-clip);
}
.hexagon:before {
  top: 4px;  /* border width */
  left: 4px;  /* border width */
  height: calc(100% - 8px);  /* 100% - (2 * border width) */
  width: calc(100% - 8px);  /* 100% - (2 * border width) */
  background: #6c6;
}
.image:before {
  background: url(http://lorempixel.com/200/200);
}
.double:after {
  top: 8px;
  left: 8px;
  height: calc(100% - 16px);
  width: calc(100% - 16px);
  background: black;
}

/* Just for demo */

.hexagon {
  display: inline-block;
  margin: 20px;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox">
      <path d="M0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0, 0.25z" />
    </clipPath>
  </defs>
</svg>
<div class="hexagon"></div>
<div class="hexagon image"></div>
<div class="hexagon double"></div>

fait en plaçant la forme hexagonale sur une autre. où L'hexagone noir en bas et blanc en haut.

Voici le résultat

jsFiddle ici

une Seule sera comme un border

vous pouvez créer cela en utilisant un seul élément, en utilisant scaleX et rotate se transforme. Ceci utilise la même méthode utilisée ici, mais avec un pseudo-élément en plus.

Tripoter

body{font-size: 25px;}
div {
    margin: 3em 0;
    width: 10em;
    height: 5.7736em; /*width / 2*0.866*/
    background: orange;
    box-shadow: inset -1.22em 0 0 0 navy, inset 1.22em 0 0 0 navy, inset -2.44em 0 0 0 crimson, inset 2.44em 0 0 0 crimson;
    position: relative;
}
div:before, div:after {
    content: '';
    position: absolute;
    background: inherit;
    width:4.08em; 
    height:4.08em;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleX(1.73) rotate(45deg);
    -moz-transform: scaleX(1.73) rotate(45deg);
    -ms-transform: scaleX(1.73) rotate(45deg);
    transform: scaleX(1.73) rotate(45deg);
}
div:before {
    top: -4.08em;
    box-shadow: inset 0 1em 0 0 navy, inset 1em 0 0 0 navy, inset 0 2em 0 0 crimson, inset 2em 0 0 0 crimson;
}
div:after {
    bottom: 0;
    box-shadow: inset 0 -1em 0 0 navy, inset -1em 0 0 0 navy, inset 0 -2em 0 0 crimson, inset -2em 0 0 0 crimson;
}

<div></div>

vous pouvez même ajouter l'effet de transition sur hover à cet hexagone:Violon (en passant le curseur de transition)

L'inconvénient de l'utilisation de box-shadows ici est qu'ils créent des bords dentelés visibles sur Firefox.

je Viens de trouver ce lien vers un designer d'hexagones que vous pouvez copier le html et css pour obtenir ce que vous voulez. J'ai pensé le laisser ici pour quelqu'un d'autre venant de ce poste.

donc en utilisant l'outil, pour avoir un hexagone blanc avec un contour vert:

.hexagon {
  position: relative;
  width: 100px; 
  height: 57.74px;
  background-color: #ffffff;
  margin: 28.87px 0;
  border-left: solid 5px #28bf20;
  border-right: solid 5px #28bf20;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 70.71px;
  height: 70.71px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 9.6447px;
}

.hexagon:before {
  top: -35.3553px;
  border-top: solid 7.0711px #28bf20;
  border-right: solid 7.0711px #28bf20;
}

.hexagon:after {
  bottom: -35.3553px;
  border-bottom: solid 7.0711px #28bf20;
  border-left: solid 7.0711px #28bf20;
}

<div class="hexagon"></div>