div - title html

¿Cómo creo una forma hexagonal recortada?

Question

¿Cómo puedo crear una forma hexagonal recortada utilizando CSS?

Por forma de hexágono recortado me refiero a algo como esto:

Pude crear un hexágono con una imagen de fondo, pero necesito que sea como en la imagen.

.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(''https://placeimg.com/300/400/any'');
background-size: auto 346.4102px;
background-position: center;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/* Counter transform the background image on the caps */
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}

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

Answer 1

El enfoque de SVG es obviamente bueno! ¡Pero intenté hacerlo a través de CSS! De alguna manera me las arreglé para conseguirlo hasta aquí ...

* {
box-sizing: border-box;
margin: 0;
padding: 0
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
body {
background: url(''http://lorempicsum.com/up/627/300/4'') no-repeat top left;
background-size: cover;
padding-top: 10%;
}
.parent {
margin: 0 auto;
display: table;
width: 400px;
height: 230px;
text-align: center;
table-layout: fixed;
}
.orange {
display: table-cell;
vertical-align: middle;
background: transparent;
width: 100%;
height: 230px;
margin: 0 auto;
overflow: hidden;
position: relative;
border-left: 137px solid orange;
border-right: 137px solid orange;
}
.one,
.two {
position: relative;
width: 126px;
height: auto;
display: block;
border-left: 28px solid orange;
border-right: 28px solid orange;
margin: 0 auto;
}
.one {
border-top: 60px solid transparent;
border-bottom: 60px solid orange;
}
.two {
border-top: 60px solid orange;
border-bottom: 60px solid transparent;
}

<div class="parent">
<div class="orange">
<div class="two"></div>
<div class="one"></div>
</div>
</div>

Answer 2

Este tipo de forma se puede lograr rellenando la parte exterior del hexágono con elementos. transform:rotate(xdeg) diferente transform:rotate(xdeg) debe aplicarse a cada elemento para lograr este efecto.

Aquí hay un fragmento creando este efecto.

Nota: se supone que el fragmento de código de abajo responde, por lo que si aparece roto, vea el que está debajo.

* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
background: url(''https://placeimg.com/800/600/any'');
background-size: cover;
background-attachment: fixed;
}
.container {
width: 50%;
height: 50%;
position: relative;
margin: 0 auto;
overflow: hidden;
border: 10px solid #009688;
}
.cut:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 100%;
transform: rotate(-60deg);
top: 0;
}
.cut:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 0%;
transform: rotate(60deg);
top: 0;
}
.container:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 0%;
transform: rotate(-60deg);
top: 0;
}
.container:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 100%;
transform: rotate(60deg);
top: 0;
}

<div class="container">
<div class="cut"></div>
</div>

Con altura y ancho fijos (mejor visualizados en pantalla completa):

* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
background: url(''https://placeimg.com/800/600/any'');
background-size: cover;
background-attachment: fixed;
}
.container {
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
border: 10px solid #009688;
}
.cut:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 100%;
transform: rotate(-60deg);
top: 0;
}
.cut:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 0%;
transform: rotate(60deg);
top: 0;
}
.container:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 0%;
transform: rotate(-60deg);
top: 0;
}
.container:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 100%;
transform: rotate(60deg);
top: 0;
}

<div class="container">
<div class="cut"></div>
</div>

Así es como funciona el hexágono recortado:

Answer 3

Para este hexágono de corte transparente , sugeriría usar un SVG en línea con el elemento de ruta :

svg{
display: block;
width: 70%;
height: auto;
margin: 0 auto;
}
path{
transition: fill .5s;
fill: #E3DFD2;
}
path:hover{
fill: pink;
}
body{background:url(''https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'');background-position:center;background-size:cover;}

<svg viewbox="-10 -2 30 14">
<path d=" M-10 -2 H30 V14 H-10z M2.5 0.66 L0 5 2.5 9.33 7.5 9.33 10 5 7.5 0.66z" />
</svg>

Cálculos del punto de la máscara del hexágono:

Las coordenadas del hexágono son bastante fáciles de calcular. Para un hexágono regular en la orientación anterior:

width = height / sin(60deg)
sin(60deg) ~=0.866

Si el ancho es 10 (como en el ejemplo anterior) las coordenadas son:

Puede encontrar estas coordenadas en el atributo d después de la segunda M

¿Por qué usar SVG?

Las principales ventajas de usar SVG en este caso son:

• Mantenimiento (ejemplo: imagine que necesita cambiar el color de la máscara. En SVG está claro lo que necesita cambiar y solo hay un atributo que cambiar).
• Código más corto
• Puedes usar fácilmente una imagen o degradado para rellenar la máscara
• Mantenga los límites de la forma y active los alrededores del ratón solo sobre el relleno respetando la máscara (coloque el hexágono transparente en el ejemplo).

Ejemplo original con el elemento máscara :

body{background:url(''https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'');background-position:center;background-size:cover;}
svg{
display: block;
width: 70%;
height: auto;
margin: 0 auto;
}

<svg viewbox="-10 -2 30 14" >
<defs>
<mask id="mask" x="0" y="0" width="10" height="10">
<rect x="-10" y="-2" width="40" height="16" fill="#fff"/>
<polygon points="2.5 0.66 7.5 0.66 10 5 7.5 9.33 2.5 9.33 0 5" />
</mask>
</defs>
<rect x="-10" y="-5" width="30" height="20" mask="url(#mask)" fill="#E3DFD2"/>
</svg>

Answer 4

Esta respuesta ilustra los costos de usar solo un elemento

SVG es la herramienta para esto. Cualquier alternativa de CSS probablemente será muy intrincada y extravagante, así que digo que lo mejor es usar SVG.

Usando CSS

Las propiedades utilizadas son:

• sombras de caja (para el color alrededor de la región transparente)
• perspectiva transforma, rotación
• desbordamiento oculto
• pseudoelemento

body {
background:url(''http://i.imgur.com/TYP4Xka.jpg'');
}
#box {
height: 400px;
width: 400px;
position: relative;
box-shadow: inset 70px 0 0 #444, inset -70px 0 0 #444, inset 0 0 0 50px #444;
overflow: hidden;
}
#box:before {
content: "";
position: absolute;
height: 150px;
width: 259.8px; /* w = h * sqrt(3) bcoz w = 2*h*cos(30deg) */
top: 125px; /* (parentHeight - pseudoHeight)/2 */
left: 70.1px; /* (parentWidth - pseudoWidth)/2 */
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
box-shadow: 70px 0 0 #444, -70px 0 0 #444;
}
#box:after {
content: "";
position: absolute;
height: 150px;
width: 259.8px;
top: 125px;
left: 70.1px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg);
box-shadow: 70px 0 0 #444, -70px 0 0 #444;
}

<div id="box"></div>

NOTA

También puede cambiar de forma la forma alrededor de una animación, pero tenga cuidado. No uses muchas sombras de cuadro para nada, especialmente para la animación. Box-shadow tiene un uso de CPU muy alto .

Answer 5

SVG es la mejor herramienta para tales cosas y el mayor factor que contribuye a ello es que es más fácil crear y mantener formas como SVG.

Pero esto se puede hacer con la transform CSS de otra manera con transformaciones más simples también. Todo lo que tenemos que hacer es utilizar la transformación de skew y establecer el ángulo de sesgo según la forma que se requiera.

Para los hexágonos, el ángulo entre cada lado es de 120 grados, por lo que los elementos deben estar sesgados en +/- 30 grados. Para los pentágonos, el ángulo entre cada lado es de 108 grados y, por lo tanto, los ángulos de inclinación en la mitad inferior serían +/- 18 grados, pero la mitad superior tendría +/- 36 grados. Para el diamante, el ángulo entre cada lado es de 90 grados, por lo que los ángulos de sesgo serían de +/- 45 grados.

Algunos puntos positivos de este enfoque son: ( no es que SVG no los tenga )

• Las formas creadas usando este enfoque son receptivas ( intente desplazarse sobre las formas en la demostración )
• Las transformaciones están bastante bien soportadas, dado que IE8 está en vías de desaparecer (los mismos Microsoft están deteniendo el soporte para IE8 a partir del 16 de enero). Esto no es malo en comparación con SVG porque SVG tiene el mismo soporte de navegador.

Sin embargo, hay algunos inconvenientes de usar CSS :

• Se requieren elementos adicionales para producir la forma.
• Esto solo funcionaría en IE9 + (es decir, navegadores que admiten transformaciones). El inconveniente no es en comparación con SVG sino en general.
• El relleno para el área que no sea el recorte no puede ser un degradado o una imagen. Solo puede ser de color sólido.
• Los efectos de desplazamiento se pueden agregar (como se muestra en la demostración) pero se activarán cuando el mouse se encuentre sobre el área de corte también porque aún es parte del contenedor aunque sea transparente.

.shape {
position: relative;
height: 100px;
border: 20px solid palevioletred;
overflow: hidden;
}
.shape.hexagon {
width: calc(100px + (100px * 0.577)); /* width = height + (height * tan 30) for hexagon */
}
.shape.pentagon {
width: calc(100px * 1.051); /* width = height * 1.618/1.539 for pentagon (Source: Wiki - https://en.wikipedia.org/wiki/Pentagon */
}
.shape.diamond {
width: 100px; /* height = width for diamond */
}
.hexagon .inner, .pentagon .inner, .diamond .inner {
position: absolute;
height: 100%;
width: 50%;
top: 0px;
left: 85%;
}
.diamond .inner {
left: 100%;
}
.shape:after, .shape:before {
position: absolute;
content: '''';
height: 50%;
width: 50%;
left: -35%;
background: palevioletred;
}
.shape.diamond:before, .shape.diamond:after {
left: -50%;
}
.hexagon .inner:after, .hexagon .inner:before, .pentagon .inner:after,
.pentagon .inner:before, .diamond .inner:after, .diamond .inner:before {
position: absolute;
content: '''';
height: 50%;
width: 100%;
left: 0px;
background: palevioletred;
}
.shape.hexagon:before, .hexagon .inner:after {
transform: skew(-30deg);
}
.shape.hexagon:after, .hexagon .inner:before {
transform: skew(30deg);
}
.shape.pentagon:before {
transform: skew(-36deg);
}
.shape.pentagon:after{
transform: skew(18deg);
}
.shape.diamond:before, .diamond .inner:after {
transform: skew(-45deg);
}
.shape.diamond:after, .diamond .inner:before {
transform: skew(45deg);
}
.pentagon .inner:before {
transform: skew(36deg);
}
.pentagon .inner:after {
transform: skew(-18deg);
}
.shape:before, .inner:before {
top: 0px;
transform-origin: right bottom;
}
.shape:after, .inner:after {
bottom: 0px;
transform-origin: right top;
}
/* just for demonstrating responsiveness */
.shape {
float: left;
margin: 10px;
transition: all 1s linear;
}
.shape:hover{ height: 150px; }
.shape.hexagon:hover { width: calc(150px + (150px * 0.577)); }
.shape.pentagon:hover { width: calc(150px * 1.051); }
.shape.diamond:hover { width: 150px; }
body {
background: url(http://lorempixel.com/500/500/nature/6) fixed;
background-size: cover;
}

<div class=''shape hexagon''>
<div class=''inner''></div>
</div>
<div class=''shape pentagon''>
<div class=''inner''></div>
</div>
<div class=''shape diamond''>
<div class=''inner''></div>
</div>