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

Question

我想知道是否有任何可能性建立与不规则形状的东西，类似于这个（例如格陵兰岛，欧洲，非洲）。我想使用CSS3和HTML5像这样创建地图。

这里是链接到一个示例图像：

Answer 1

元素一直是长方形。但是，您仍然可以通过在矩形区域内绘制CSS形状并安排不同的分割（使用z-index等）来模拟其他形状。这将帮助你：

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

Answer 2

你有什么有看起来像一个网格，你可以得到要么在一个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 3

如果要进行精确的边界不规则，去为HTML图像地图（仍比CSS和绝对定位的更好的解决方案），试试这个http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

你应该能够创建你的地图为正方形，无论你选择什么元素，然后将整个东西包装在div/span/whatever中，并执行css3 3d变换以获得它的方式。