Preciso criar um menu com div diagonais que quando passa o mause em cima troca de cor e cada imagem contem um link para uma categoria diferente.
O problema é que eu não consigo criar uma div em diagonal, e queria achar uma solução para o problema apenas usando html e css se possível.
Como posso criar um menu mosaico como este?
No caso apenas fazer formas geométricas não funciona para mim, pois tem o background image.
Preciso distorcer o tamanho das divs para ficar semelhante a imagem.
Um pessoal está falando que é duplicata e até mesmo votando contra meu post, por isto irei mostrar que o problema não é tão simples. O problema é muito mais a fundo que as formas geométricas por que no esquema de border não dá para fazer um background image. Apenas adicionar uma cor de fundo.
E pelo skew dá para colocar um background-image, porém não consigo fazer as imagens ter o ângulo correto, pois ela distorce os dois lados do ângulo.
#trapezoid {
border-top: 200px solid transparent;
border-left: 0px solid white;
border-right: 40px solid white;
width: 150px;
float: left;
background-image: url('http://pongnamuroms.weebly.com/uploads/1/3/3/6/13369650/144214_orig.png');
opacity: 0.7;
background-size: calc(100% + 100px);
}
#trapezoid2 {
border-bottom: 200px solid transparent;
border-left: 40px solid white;
border-right: 0px solid white;
width: 150px;
margin-left: -34px;
float: left;
background-image: url('http://www.androidspin.com/wp-content/uploads/2015/05/flow_aquablue.png');
opacity: 0.7;
background-size: calc(100% + 100px);
}
#trapezoid2:hover{
opacity: 1;
}
#trapezoid:hover{
opacity: 1;
}
<div id="trapezoid">
</div>
<div id="trapezoid2">
</div>
<div id="trapezoid3">
</div>