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

Question

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

Aquí es un enlace a una imagen de ejemplo:

Answer 1

elementos han sido siempre rectangular. 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 le ayudará a:

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

Answer 2

lo que tienes ahí se ve como una rejilla, que se puede obtener ya sea con muchos gradientes en un div, ya sea con una rejilla de muchos divs en que aplica CSS transforma (DEMO).

HTML:

<div class='container'> 
    <div class='grid'> 
     <div class='grid-row'> 
      <div class='grid-cell'></div> 
      <div class='grid-cell high'></div> 
<!-- and so on... --> 

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; 
} 

Answer 3

si quieren fronteras exacta irregulares a realizar, ir para los mapas de imagen HTML (todavía una solución mejor que la CSS y el posicionamiento absoluto), prueba este http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

Usted debe ser capaz de crear su mapa como cuadrados, con los elementos que elija, y luego envolver todo en un div/span/lo que sea y realizar una transformación 3d css3 para obtenerlo como lo necesite.