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
