Elementos de menú de diamante con CSS y SVG
Quiero codificar el siguiente diseño en HTML y CSS
Lo que hice hasta ahora es:
Lo hice usando:
un enlacesSVG como fondoPosición absoluta y propiedad de traducción (x, y) en CSS.Por favor, chequee estoviolín para el enlace en vivo
Los problemas en mi diseño son:
Cada elemento es en realidad un rectángulo, si observa el rectángulo resaltado en rojo, esta es el área de la selección, por lo que si pasa el cursor sobre la esquina izquierda de m2, seleccionará m3.Quiero cambiar el color de fondo del fondo SVG al pasar el mouse, ¿cómo lograrlo?¿Hay una manera ideal de mejorar este concepto? incluso si usamos JS para posicionar los elementos.Hacer clicaquí para ver la forma SVG en sí misma.
Código CSS para los artículos:
.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);
}
Gracias,