Hexágono com Puro CSS

watch_later terça-feira, julho 21, 2015

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.