tenho duvidas de como montar o layout abaixo com HTML/CSS:
Não implementei nada ainda, pois estou sem idéia de como fazer. Alguma sugestão?
Obrigado!
tenho duvidas de como montar o layout abaixo com HTML/CSS:
Não implementei nada ainda, pois estou sem idéia de como fazer. Alguma sugestão?
Obrigado!
Basicamente isso é uma div parent
em forma de quadrado que é rodada a 45 graus, e que depois é adicionada dentro desta uma nova div child
, que irá conter a imagem como background-image
que irá ser rodada a -45 graus para voltar novamente à rotação inicial de 0 graus, ou vice-versa.
Por outras palavras:
/* Aqui a div pai é rodada a 45 graus */
.quadrado {
width: 200px;
height: 200px;
margin: 50px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
overflow: hidden;
}
/* E aqui (onde está a imagem como background) volta a ser rodada novamente para a sua posição inicial */
.minhaImagem {
background: url(http://i.imgur.com/QDJ7Nae.jpg);
width: 300px;
height: 300px;
margin: -50px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-size: cover;
background-position: 50%;
}
<div class="quadrado">
<div class="minhaImagem"></div>
</div>
No exemplo da imagem que adicionas-te juntamente com tua pergunta a imagem parece estar um pouco achatada, eu estive ali a brincar um pouco com código CSS e consegui criar o efeito do quadrado com essa rotação da maneira como já descrevi acima, porém não experimentei achatá-la, mas se desperdiçares ali um pouco de tempo de volta do código penso que conseguirás criar esse mesmo efeito. Podes também dar uma olhada neste artigo que poderá te ajudar a alcançar o pretendido.