Hexagone forme avec un border/contour

Je sais que c'est possible de créer un hexagone forme 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 puis-je créer un hexagone qui est rempli avec une couleur, et le contour avec un autre? Je suis en train de jouer avec lui, mais il ne semble pas être possible.

D'autres alternatives sont les bienvenus, je voudrais éviter à l'aide d'images.

Jetez un oeil à cette css hexagone tutoriel jtauber.github.io/articles/css-hexagon.html
C'est exactement là où j'ai pris le code si. Mon problème est que au lieu d'avoir un vert hexagone, je voudrais un blanc hexagone avec un contour vert.
veuillez faire tripoter pour votre question, il sera plus facile de travailler sur.
Serait-ce suffisant? J'ai inclus le code je l'ai mentionné dans l'OP. jsfiddle.net/uTfCY

InformationsquelleAutor Arkuen | 2013-10-17

18

Il n'est pas directement possible pour atteindre cet objectif, comme les hexagones sont créés par des frontières par le biais de pseudo-éléments. Une alternative serait de superposer les hexagones dans les hexagones, de manière à atteindre les mêmes résultats souhaités.

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

LIVE EXEMPLE ICI

HTML - assez basique, poursuivre sur le même schéma pour plus de frontières.
```
<div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div>
```
CSS (trois couches - deux éléments internes)

Commencer avec l'hexagone de classe, la définition de 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 l'intérieur de la classe et de l'utilisation transform: scale() pour réduire proportionnellement les dimensions des éléments internes. Dans cet exemple, une échelle de scale(.8, .8) est utilisé. Si vous voulez plus épais frontières, de diminuer le nombre; à l'inverse, si vous souhaitez plus mince frontières, à augmenter le nombre.

Spécifier et de remplacer les couleurs, aussi augmenter le z-index d'apporter une valeur de l'élément avant.
```
.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;
}
```
Style le deuxième élément imbriqué, essentiellement en suivant les mêmes étapes que la dernière fois. Il vaut la peine rien que la même scale valeur est utilisée, car il est dans une déjà mis à l'échelle de l'élément. Bien sûr, vous pouvez utiliser ce que vous voulez; c'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;
}
```
De nouveau, live exemple ici
- Oui, c'est bon! Est-il possible d'obtenir la largeur de la structure de l'égalité de tous autour de vous?
- Oui, donnez-moi une seconde, vous n'avez qu'à faire leur proportionnelle.
- Absolument génial. Merci beaucoup!
InformationsquelleAutor Josh Crozier

Voici une autre méthode pour créer des hexagones à la frontière (ou contour) à l'aide de la clip-path fonctionnalité. Dans cette méthode, on utilise un élément de conteneur et d'un pseudo-élément qui a des dimensions plus petites (les deux height et width) que le conteneur. Lorsque le même clip-path est appliqué à la fois les éléments, la 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 de la forme.

Hexagone forme avec un border/contour

Avantages:

Hexagones peuvent aussi avoir des dégradés ou des images (essentiellement non-couleur unie) comme background.
Forme est sensible et peut automatiquement s'adapter à tout changement dans le conteneur de dimensions.

CSS:

.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;
}

HTML:

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

La inconvénient majeur est le la mauvaise prise en charge du navigateur à l'heure actuelle. CSS clip-path ne fonctionnent pas sous IE et FF actuellement. Le problème avec FF peut être fixé à l'aide d'un SVG (en ligne ou externe) pour le clip-path (comme dans l'extrait de code ci-dessous):

CSS:

.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;
}

HTML:

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

InformationsquelleAutor Harry

3

Fait avec la mise en place de la forme hexagonale sur le dessus de l'autre. où le noir de l'Hexagone en bas et blanc en haut.

Voici le résultat

jsFiddle ici

Seulement sera comme un border

InformationsquelleAutor Sobin Augustine

Vous pouvez créer à l'aide d'un seul élément, à l'aide de scaleX et rotate transforme. Il utilise la même méthode que celle utilisée ici, mais avec un pseudo-élément sur le dessus.

Violon

CSS:

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;
}

HTML:

<div></div>

Vous pouvez même ajouter un effet de transition sur le vol stationnaire à cet hexagone : Violon (en passant le curseur de la transition)

Hexagone forme avec un border/contour

L'inconvénient de l'utilisation de la boîte-ombres ici, c'est qu'ils créer visible bords irréguliers sur Firefox.

InformationsquelleAutor The Pragmatick

Viens de trouver ce lien pour un hexagone designer que vous pouvez copier le code html et css de pour obtenir ce que vous voulez. J'ai pensé le laisser ici pour quelqu'un d'autre de venir à travers ce post.

Donc, utiliser l'outil, afin d'avoir un fond blanc hexagone avec un contour vert:

CSS:

.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;
}

HTML:

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

InformationsquelleAutor JabbaWook

Vous devez vous connecter pour publier un commentaire.

LIVE EXEMPLE ICI