Hexágono com Puro CSS

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.