如何使用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變換以獲得它的方式。