web-dev-qa-db-fra.com

hexagone html/css avec image à l'intérieur

Y a-t-il une chance de placer une image à l'intérieur d'une forme hexagonale? Je suis habitué aux cellules de forme hexagonale en html , mais je ne pouvais pas le faire remplir avec une image (de fond?).

Voici ce que j'ai essayé:

.top {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: red;
  border-left-color: transparent;
}
.middle {
  height: 20px;
  background: red;
  width: 40px;
  display: block;
}
.bottom {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: red;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
<div class="hexagon pic">
  <span class="top" style="background: url(http://placekitten.com/400/400/)"></span>
  <span class="middle" style="background: url(http://placekitten.com/400/400/)"></span>
  <span class="bottom" style="background: url(http://placekitten.com/400/400/)"></span>
</div>


<div class="hexagon">
  <span class="top" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
  <span class="middle" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
  <span class="bottom" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>
</div>

<div class="hexagon">
  <span class="top"><img src="http://placekitten.com/400/400/" /></span>
  <span class="middle"><img src="http://placekitten.com/400/400/" /></span>
  <span class="bottom"><img src="http://placekitten.com/400/400/" /></span>
</div>

voici un violon: http://jsfiddle.net/jnz31/kGSCA/

htmlcsssvgcss-shapes
23
honk31

Avec CSS3 presque tout est possible: http://jsfiddle.net/kizu/bhGn4/

Là, j’ai utilisé différentes rotations avec overflow: hidden, de sorte que vous puissiez obtenir un masque (ainsi, modern cross-broser) qui peut même être recouvert et cliqué sur la zone masquée.

64
kizu

La manière la plus flexible d’atteindre un hexagone avec une image est d’utiliser un SVG inline:

svg{
  width:30%;
}
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>

Il existe au moins deux méthodes pour obtenir l’image hexagonale avec SVG:

  • création d'un polygone hexagonal et remplissage du polygone avec une image et l'élément pattern (approche que j'utilise dans l'extrait précédent)
  • découper l'image avec un polygone hexagonal (voir l'extrait suivant)

svg{width:30%}
<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="hexClip">
      <polygon points="50 1 99 25 99 75 50 99 1 75 1 25"/>
    </clipPath>
  </defs>  
  <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" clip-path="url(#hexClip)"/>
</svg>

L’approche SVG permet de contrôler de nombreux aspects de la forme et de l’image de l’hexagone. Et ils peuvent être stylés avec CSS. Voici un exemple :

svg{
  width:30%;
  margin:0 auto;
}
#hex{
  stroke-width:2;
  stroke: teal;
  fill-opacity:0.6;
  transition:fill-opacity .8s;
}
#hex:hover{
  fill-opacity:1;
}
#text{
  stroke-width:0.5;
  stroke:teal;
  fill-opacity:0.4;
  fill:teal;
  transition:fill-opacity .8s;
}
#hex:hover + #text{
  fill-opacity:1;
}
<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
  <text id="text" font-size="20" x="50" y="50" text-anchor="middle">Some text</text>
</svg>

Pour une autre approche permettant de créer des hexagones avec une image à l’intérieur, cochez cette question: Grille sensible d’hexagones

14
web-tiki

Vous pouvez le faire en superposant des coins comme ceci:

http://jsfiddle.net/Eric/kGSCA/3/

HTML:

<div class="hexagon pic">
    <span class="top"></span>
    <span class="bottom"></span>
</div>

CSS:

.hexagon {
    background: url(http://placekitten.com/400/400/);
    width: 400px;
    height: 346px;
    position: relative;
}

.hexagon span {
    position: absolute;
    display: block;
    border-left: 100px solid red;
    border-right: 100px solid red;
    width: 200px;
}

.top {
    top: 0;
    border-bottom: 173px solid transparent;
}

.bottom {
    bottom: 0;
    border-top: 173px solid transparent;
}
6
Eric

Une nouvelle approche simple consisterait à utiliser la propriété css3 clip-path.

De Documentation :

La propriété CSS de clip-path empêche une partie d'un élément de être affiché en définissant une région de découpage à afficher, c'est-à-dire seule une région spécifique de l'élément est affichée.

Suite à css montrera un élément rectangulaire en forme d'hexagone:

div.hexagon {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

Image de sortie:

 Output Image shows image in hexagon shape 

body {
  background: linear-gradient(orange, yellow);
  min-height: 100vh;
  margin: 0;
}
.hexagon {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: url("https://i.imgur.com/waDgcnc.jpg") no-repeat;
  background-size: cover;
  margin: 10px auto;
  height: 200px;
  width: 200px;      
}
<div class="hexagon">
  
</div>

Nous pouvons utiliser cette propriété pour dessiner toutes les formes que nous voulons. Voici quelques exemples:

div.pentagon {
  clip-path: polygon(50% 0, 100% 45%, 80% 100%, 20% 100%, 0 45%);
}
div.octagon {
  clip-path: polygon(33.33% 0%, 66.66% 0%, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%, 0 33.33%);
}

Image de sortie:

 Output Image showing other examples of clip path 

body {
  background: linear-gradient(orange, yellow);
  min-height: 100vh;
  margin: 0;
}
div {
  background: url("https://i.imgur.com/waDgcnc.jpg") no-repeat;
  background-size: cover;
  margin: 10px 20px;
  height: 170px;
  width: 170px;
  float: left;
}

.pentagon {
  clip-path: polygon(50% 0, 100% 45%, 80% 100%, 20% 100%, 0 45%);
}

.octagon {
  clip-path: polygon(33.33% 0%, 66.66% 0%, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%, 0 33.33%);
}
<div class="pentagon">
  
</div>
<div class="octagon">
  
</div>

Remarque: La propriétéclip-path css n'est pas prise en charge dans IE et Edge . Toutefois, les versions futures d’Edge devraient prendre en charge cette fonctionnalité propriété.

5
Mohammad Usman

voici un moyen simple de placer une seule photo.

<style>
.hex{
    width:80px;
    height:80px;
    background-image: url(http://placekitten.com/400/400/);
    background-size: cover;
    position:relative;
    margin:10px;
}
.hex:before, .hex:after{
    content:"";
    position:absolute;
    top:0px;height:40px;width:0px; /* 40 = height/2 */
    z-index:1;
    border:20px solid #FFF; /*change #FFF to your bg color*/
}
.hex:before{
    left:-20px; /* -1*borderWidth */
    border-right:40px solid transparent;/* width/2 */
}
.hex:after{
    left:40px; /* width/2 */
    border-left:40px solid transparent;/* width/2 */
}
</style>
<div class="hex"></div>

besoin d'une frontière? un fond img sera plus facile et plus rapide.

<div class="hex">
    <div style="position:absolute;top:-20px;left:-20px;bottom:-20px;right:-20px;
        z-index:2;background-image:url(/images/hexagon.png);">
    </div>
</div>
2
Soyoes

Je ne sais pas si c'est la réponse que vous cherchez, mais vous pouvez poser un fichier .png transparent en forme d'hexagone sur l'image que vous souhaitez utiliser et le laisser agir comme un masque.

Il suffit simplement de placer le png transparent sur l'image avec z-index

0
Ricardo

Je ne pense pas qu'il soit possible de le faire avec du HTML/CSS pur sans aucun graphique externe. Il se peut que des astuces intelligentes utilisent les techniques que vous avez associées à la question, mais ce ne sont que des astuces astucieuses. Il est donc probablement préférable de ne pas les utiliser dans un site Web actif (et comme dans la plupart des astuces intelligentes avec au moins quelques problèmes de compatibilité entre navigateurs).

Vous pouvez le faire avec Canvas ou SVG.

Canvas est une fonctionnalité graphique bitmap faisant partie de la spécification HTML5. SVG est un langage graphique vectoriel qui peut être utilisé dans une page HTML.

Ces deux fonctionnalités sont des fonctionnalités des navigateurs modernes et manquent donc tristement dans la plupart des versions d’Internet Explorer (IE8 et les versions antérieures).

Heureusement, cependant, IE prend en charge un langage similaire à SVG appelé VML et il existe un certain nombre de bibliothèques javacript qui permettent à IE d'utiliser Canvas et SVG en les convertissant au format VML.

Voir également:

Avec l’un des outils liés ci-dessus, vous pouvez utiliser Canvas ou SVG pour dessiner une forme hexagonale (ou n’importe quelle autre) et la remplir avec votre graphique.

J'espère que cela pourra aider.

0
Spudley