Itens de menu em diamante usando CSS e SVG
Quero codificar o design abaixo em HTML e CSS
O que eu fiz até agora é:
Eu fiz isso usando:
um linksSVG como plano de fundoPosição absoluta e propriedade de conversão (x, y) em CSS.Por favor, checar istoviolino para o link ao vivo
Os problemas no meu design são:
Cada item é na verdade um retângulo; se você observar o retângulo destacado em vermelho, esta é a área da seleção; portanto, se você passar o mouse sobre o canto esquerdo de m2, ele selecionará m3.Eu quero mudar a cor de fundo do SVG ao passar o mouse, como conseguir isso?Existe uma maneira ideal de melhorar esse conceito? mesmo se usamos JS para posicionar os elementos.Cliqueaqui para visualizar a própria forma SVG.
Código CSS para os itens:
.menu #m1 {
right: 100px;
transform: translate(-140px, -160px);
}
.menu #m2 {
right: 295px;
transform: translate(-25px, -80px);
}
.menu #m3 {
right: 400px;
}
.menu #m4 {
right: -60px;
transform: translate(-140px, -160px);
}
.menu #m5 {
right: 140px;
transform: translate(-20px, -80px);
}
.menu #m6 {
right: 240px;
}
.menu #m7 {
right: -95px;
transform: translate(-15px, -160px);
}
.menu #m8 {
right: 0px;
transform: translate(0, -80px);
}
Obrigado,