¿Cómo puedo hacer un div con formas irregulares con css3 y html5?

Me pregunto si existe alguna posibilidad de construir div con formas irregulares, algo similar a esto (por ejemplo, Groenlandia, Europa, África). Quiero crear un mapa como aquí usando CSS3 y HTML5.

Aquí hay un enlace a una imagen de ejemplo:

Los elementos siempre han sido rectangulares. Aún así, puede simular otras formas dibujando formas CSS dentro de la división rectangular y organizando divisiones diferentes (con índice Z, etc.). Esto te ayudara:

http://css-tricks.com/examples/ShapesOfCSS/

Lo que tienes allí parece una cuadrícula, que puedes obtener con muchos degradados en un div, ya sea con una cuadrícula de muchos divs en los que aplicas transformaciones CSS ( DEMO ).

HTML:

CSS:

 div { box-sizing: border-box; } .container { overflow: hidden; width: 32em; height: 32em; margin: 5.6em auto 0; background: silver; } .grid { transform: skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(-4.5em) translateY(-3em); } .grid-row { width: 32em; height: 2em; } .grid-cell { float: left; width: 2em; height: 2em; } .high { background: gainsboro; } .high:hover { background: whitesmoke; } 

si desea que se hagan bordes irregulares exactos, vaya a mapas de imágenes HTML (sigue siendo una mejor solución que css y posicionamiento absoluto), intente esto http://www.svennerberg.com/examples/imagemp_rollover/

Deberías poder crear tu mapa como cuadrados, con los elementos que elijas, y luego envolver todo en un div / span / lo que sea y realizar una transformación css3 3d para obtenerlo como lo necesites.