html - css3 と html5 で不規則な形状の div を作成するにはどうすればよいですか?

Question

これに似た不規則な形の div を構築する可能性はあるのでしょうか (グリーンランド、ヨーロッパ、アフリカなど)。CSS3とHTML5を使ってこんな地図を作りたいです。

サンプル画像へのリンクは次のとおりです。

Answer 1

そこにあるものはグリッドのように見えます。これは、div に多くのグラデーションを使用するか、CSS 変換を適用する多くの div のグリッドを使用して取得できます。

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

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