如何使用css3和html5制作具有不规则形状的div？

我想知道有没有可能用不规则的形状来构建div，类似的东西（例如格陵兰岛、欧洲、非洲）。我想使用CSS3和HTML5创建像这里这样的地图

以下是指向示例图像的链接：

---

你所拥有的看起来像一个网格，你可以通过一个div上的许多渐变来获得它，也可以通过一个由许多div组成的网格来应用CSS变换（）

HTML:

---

元素一直是矩形的。不过，您可以通过在矩形分区内绘制CSS形状和排列不同分区（使用z索引等）来模拟其他形状。这将帮助您：

---

如果你想制作精确的不规则边框，可以选择HTML图像地图（仍然是比css和绝对定位更好的解决方案），试试这个

你应该能够用你选择的任何元素创建正方形的地图，然后用div/span/which将整个东西包装起来，并执行css3 3d转换，以获得所需的效果。

非常感谢，真的，安娜！这正是我所需要的！当做这可能是我遇到的最酷的事情之一。干得好这太棒了！你提供了一些不同寻常的东西，安娜！如果我能投你100票，我会的。

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

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