How can I make a div with irregular shapes with css3 and html5?

Question

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 CSS3 and HTML5.

Here is link to an example image:

Answer 1

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/

Answer 2

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 (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

if you want exact irregular borders to be made,go for HTML image maps(still a better solution than css and absolute positioning) , try this http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

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.