Como criar uma imagem em forma de hexágono usando apenas CSS?
Para criarmos uma imagem em forma de hexágono podemos fazê-lo de 2 maneiras, utilizando a tag `<img>`, ou utilizando a imagem como `background-image`.
Para alcançarmos o pretendido vamos utilizar a propriedade `transform:rotate();` do CSS3.
Usando a tag `<img>` :
```
<div class="hexagono">
<img src="//i.imgur.com/ZNRZUaQ.png"/>
</div>
```
```
.hexagono {
position:relative;
margin:auto;
text-align:center;
overflow:hidden;
white-space:nowrap;
display:table;
}
.hexagono:before {
content:'';
padding-top:120%;
display:inline-block;
vertical-align:middle;
}
.hexagono:after {
content:'';
position:absolute;
top:0%;
left:-10%;
width:120%;
padding-top:120%;
transform: rotatex(51deg) rotate(45deg);
text-align:center;
box-shadow:0 0 0 200px white;;
}
.hexagono img {
display:inline-block;
vertical-align:middle;
margin:0 -10px;
}
```
Ou o segundo método:
Usando a imagem como `background-image` :
Ok, este método vai ser um pouco complicado na parte do CSS, mas basicamente é o mesmo hack que utilizamos no exemplo anterior usando os selectores `before` e `after`. Um hexágono tem seis arestas e cada uma delas tem um ângulo de 60 graus. Nós vamos construir um hexágono com 3 retângulos. Conforme no exemplo da figura abaixo, do passo 1 a 3, vamos estar a colocar dois retângulos por cima do retângulo principal e girá-los a 60 graus. É assim que um hexágono é feito.
```
<div class="hexagono um">
<div class="imagem1">
<div class="imagem2"></div>
</div>
</div>
```
```
.hexagono {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.imagem1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.imagem2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(http://i.imgur.com/ZNRZUaQ.png);
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.um {
width: 200px;
height: 250px;
margin: 0 0 0 20px;
}
```
Aqui está um exemplo no jsFiddle com os 2 exemplos referidos acima e um terceiro hexágono com uma forma(rotação) diferente:
► https://jsfiddle.net/qqy26d3e/
Como alternativa existe este site para criação de hexágonos com uma interface agradável e fácil de usar que irá converter o código HTML e CSS na hora.