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

Question

我想知道是否有可能建造具有不规则形状的div，类似于此（例如格陵兰，欧洲，非洲）。我想使用CSS3和HTML5创建这样的地图。

以下是示例图片的链接：

Answer 1

你在那里看起来像一个网格，你可以在div上获得许多渐变，或者使用许多div的网格，你可以在其上应用CSS变换（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 2

元素一直是矩形的。您仍然可以通过在矩形分区内绘制CSS形状并排列不同的分区（使用z-index等）来模拟其他形状。这将对您有所帮助：

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

Answer 3

如果您想要制作精确的不规则边框，请转到HTML图像地图（仍然是比css和绝对定位更好的解决方案），试试这个http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

您应该能够将地图创建为正方形，使用您选择的任何元素，然后将整个事物包装在div / span / whatever中，并执行css3 3d变换以获得它所需的方式。