Foto com borda hexagonal com CSS

Neste artigo iremos conciliar a técnica de hexágono com CSS e inserir uma foto com borda hexagonal com CSS no HTML.

Primeiramente para utilizar a imagem em um hexágono, devemos aprender a criar a figura geométrica

Porém antes de iniciar a criação do mesmo, quero dizer que neste post, crio em detalhes o hexágono

O post foi feito certo tempo atrás mas a ideia ainda é a mesma, então se você quiser aprender o que acontece por baixo dos panos no HTML/CSS acesse o post…

E neste da imagem no hexágono, vou apenas mostrar a técnica que utilizo nos meus projetos, então vamos lá! 😀

Criando o hexágono com CSS

Vou primeiramente mostrar o código e o resultado final dele:

<!-- HTML -->
<div id="hexagono"></div>

/* CSS */

body {
   margin: 100px;
}
#hexagono {
   width: 100px;
   height: 105px;
   background-color: red;
   position: relative;
}
#hexagono:before {
   content: "";
   position: absolute;
   top: 0px;
   left: 0px;
   width: 0;
   height: 0;
   border-left: 50px solid white;
   border-right: 50px solid white;
   border-bottom: 25px solid transparent;
}
#hexagono:after {
   content: "";
   position: absolute;
   bottom: 0px;
   left: 0;
   width: 0;
   height: 0;
   border-left: 50px solid white;
   border-right: 50px solid white;
   border-top: 25px solid transparent;
}

E teremos isso na página, com este código adicionado:

Bom, com este código você consegue fazer a figura geométrica, e também alterar a dimensão dela caso seja necessário

Basta alterar a width e height da div principal, e também as bordas, top e bottom do :after e :before, tudo proporcionalmente

Vale lembrar também que o estilo no body não é necessário, usei apenas para descolar das bordas do navegador o hexágono

Então agora o que falta, é inserir a imagem desejada no hexágono

Inserindo a imagem no hexágono

Para finalizar nossa tarefa, serão necessárias algumas alterações

Vamos remover o background-color e adicionar algumas novas regras para a propriedade background

Assim vamos inserir a imagem e centralizar a mesma, veja:

#hexagono {
   width: 100px;
   height: 105px;
   background: transparent url('matheus.jpeg') no-repeat; 
   background-size: cover;
   background-position: center center;
   position: relative;
}

/* resto nao muda */

Detalhe que a única porção de código alterada, foi a div principal do hexágino, onde fiz as mudanças supracitadas

Inserimos a imagem, garantimos que não vai repetir e centralizamos

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

O resultado final foi este:

E assim temos a foto com borda hexagonal com CSS!

Detalhe que você precisa adicionar uma imagem existente no seu PC, meio óbvio mas é bom fazer a colocação! 😀

Código completo

Segue o código completo para os preguiçosos! 😀 (me incluo haha)

<!-- HTML -->
<div id="hexagono"></div>

/* CSS */
body {
   margin: 100px;
}
#hexagono {
   width: 100px;
   height: 105px;
   background: transparent url('matheus.jpeg') no-repeat; 
   background-size: cover;
   background-position: center center;
   position: relative;
}
#hexagono:before {
   content: "";
   position: absolute;
   top: 0px;
   left: 0px;
   width: 0;
   height: 0;
   border-left: 50px solid white;
   border-right: 50px solid white;
   border-bottom: 25px solid transparent;
}
#hexagono:after {
   content: "";
   position: absolute;
   bottom: 0px;
   left: 0;
   width: 0;
   height: 0;
   border-left: 50px solid white;
   border-right: 50px solid white;
   border-top: 25px solid transparent;
}

Conclusão

Na primeira parte foi mostrada a estratégia para criar um hexágono com CSS, depois inserimos a imagem de fundo na figura

A parte mais difícil, com certeza, é fazer o hexágono, depois disso apenas precisamos do background-image com a imagem e pronto! 🙂

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo