hexágono html/css con imagen dentro

Siéntete libre de divulgar nuestros tutoriales y códigos con otro, danos de tu ayuda para hacer crecer esta comunidad.

Solución:

Con CSS3 casi todo es posible: http://jsfiddle.net/kizu/bhGn4/

Allí usé diferentes rotaciones con overflow: hiddenpara que pueda obtener un navegador cruzado (bueno, moderno cross-broser) máscaras que incluso se pueden cubrir y hacer clic en el área enmascarada.

La forma más flexible de lograr un hexágono con una imagen es usar un SVG en línea :

svg
  width:30%;

Hay al menos dos formas de lograr la imagen hexagonal con SVG:

• haciendo un polígono hexagonal y llenando el polígono con una imagen y el pattern elemento (enfoque que utilizo en el fragmento anterior)
• recortar la imagen con un polígono hexagonal (ver siguiente fragmento)

svgwidth:30%

El enfoque SVG permite controlar muchos aspectos de la forma e imagen del hexágono. Y se pueden diseñar con CSS. Aquí hay un ejemplo :

svg
  width:30%;
  margin:0 auto;

#hex
  stroke-width:2;
  stroke: teal;
  fill-opacity:0.6;
  transition:fill-opacity .8s;

svg:hover #hex 
  fill-opacity:1;

#text
  stroke-width:0.5;
  stroke:teal;
  fill-opacity:0.4;
  fill:teal;
  transition:fill-opacity .8s;

svg:hover #text
  fill-opacity:1;

Para otro enfoque para hacer hexágonos con una imagen dentro, consulte esta pregunta: Cuadrícula receptiva de hexágonos

Un enfoque nuevo y fácil sería usar css3 clip-path propiedad.

De la documentación:

La propiedad CSS clip-path evita que se muestre una parte de un elemento al definir una región de recorte para que se muestre, es decir, solo se muestra una región específica del elemento.

El siguiente css mostrará un elemento rectangular en forma de hexágono:

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

Imagen de salida:

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;      

Podemos usar esta propiedad para dibujar cualquier forma que queramos. A continuación se muestran un par de ejemplos:

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%);

Imagen de salida:

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%);

Nota:clip-path La propiedad css no es compatible con IE y Edge. Sin embargo, se espera que las futuras versiones de Edge admitan esta propiedad.

Si haces scroll puedes encontrar las referencias de otros creadores, tú además puedes mostrar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador