web-dev-qa-db-fra.com

Forme hexagonale avec une bordure/contour

Je sais qu'il est possible de créer une forme hexagonale en utilisant le code suivant:

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

Comment créer un hexagone rempli d'une couleur et délimité par une autre? J'essaie de le tripoter, mais cela ne semble pas être possible.

Toute autre alternative est la bienvenue, je voudrais éviter d’utiliser des images.

htmlcsscss3css-shapes
16
Arkuen

Il n'est pas possible d'y parvenir directement, car les hexagones sont créés par des frontières à l'aide de pseudo-éléments. Une alternative serait de superposer des hexagones dans des hexagones, obtenant ainsi les mêmes résultats souhaités.

Voici un exemple de ce qui peut être réalisé:

hexagon imageenter image description here

EXEMPLE DE LIVE ICI

HTML - assez basique, continuez le même motif pour plus de bordures.

<div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div>

CSS (trois couches - deux éléments internes)

Commencez avec la classe hexagonale, définissant la forme/taille/couleurs:

.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    content:"";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}
.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}
.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

Style de la classe interne et utilisez transform: scale() pour diminuer proportionnellement les dimensions des éléments internes. Dans cet exemple, une échelle de scale(.8, .8) est utilisée. Si vous voulez des bordures plus épaisses, diminuez le nombre; inversement, si vous voulez des bordures plus minces, augmentez le nombre.

Spécifiez et remplacez les couleurs, augmentez également la valeur z-index pour faire avancer l'élément.

.hex.inner {
    background-color:blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:1;
}
.hex.inner:before {
    border-bottom: 60px solid blue;
}
.hex.inner:after {
    border-top: 60px solid blue;
}

Donnez un style au deuxième élément imbriqué, en suivant essentiellement les mêmes étapes que la dernière fois. Cela ne vaut rien que la même valeur scale soit utilisée, car elle se trouve dans un élément déjà mis à l'échelle. Bien sûr, vous pouvez utiliser ce que vous voulez. ceci est juste un exemple de base.

.hex.inner2 {
    background-color:red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}

Encore une fois, exemple live ici

18
Josh Crozier

Voici une autre méthode pour créer des hexagones avec une bordure (ou un contour) à l’aide de la fonctionnalité clip-path. Dans cette méthode, nous utilisons un élément conteneur et un pseudo-élément dont les dimensions (height et width) sont plus petites que celles du conteneur. Lorsque le même clip-path est appliqué aux deux éléments, le background-color de l'élément conteneur est visible derrière le pseudo-élément uniquement sur les bords et lui donne l'apparence d'une bordure/contour de la forme.

 enter image description here

Avantages:

  • Les hexagones peuvent également avoir des dégradés ou des images (essentiellement de couleur non solide) sous la forme background.
  • La forme est responsive et peut s’adapter automatiquement à tout changement des 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>

Le majeur inconvénient est le support médiocre du navigateur pour le moment. CSS clip-path ne fonctionne pas dans IE et FF pour le moment. 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 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>

9
Harry

Vous pouvez créer cela en utilisant un seul élément, en utilisant les transformations scaleX et rotate. Ceci utilise la même méthode ici , mais avec un pseudo-élément supplémentaire en haut.

Fiddle

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 un effet de transition en survol à cet hexagone: Fiddle (transition en survol)

enter image description here

L’inconvénient d’utiliser des ombres à coques ici est qu’elles créent des arêtes irrégulières visibles sur Firefox. 

3
The Pragmatick

Fait de placer la forme hexagonale sur un autre. où Hexagone noir en bas et blanc en haut.

Voici le résultat

enter image description here

jsFiddle ici

Seulement sera comme un border

3
Sobin Augustine

Je viens de trouver ce lien vers un concepteur hexagon que vous pouvez copier les fichiers html et css pour obtenir ce que vous voulez. Je pensais que je le laisserais ici à quiconque viendrait sur ce post.

Donc, en utilisant l’outil, 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>

0
JabbaWook