How Can I Make A Div With Irregular Shapes With Css3 And Html5?

I'm wondering is there any possibility to build div with irregular shapes, something, similar to this (e.g. Greenland, Europe, Africa). I want to create map like here with using CS

Solution 1:

What you have there looks like a grid, which you can obtain either with many gradients on a div, either with a grid of many divs on which you apply CSS transforms.

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

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

Solution 2:

Elements have always been rectangular. Still, you can simulate other shapes by drawing CSS shapes within the rectangular division and by arranging different divisions (with z-index, etc.). This will help you:

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

Solution 3:

You should be able to create your map as squares, with whatever elements you choose, and then wrap the whole thing in a div/span/whatever and perform a css3 3d transform to get it how you need it.