2012-08-26 43 views

回答

34

你有什麼有看起來像一個網格,你可以得到要麼在一個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; 
} 
+0

非常感謝你,確實,安娜!這是我需要的東西!問候! – Rafath

+1

這可能是我遇到的最酷的事情之一。做得好! – shane

+0

這太棒了!你提供了一些非凡的,安娜!如果我可以讓你百回合,我會的。 – Grzegorz

0

你應該能夠創建你的地圖爲正方形,無論你選擇什麼元素,然後將整個東西包裝在div/span/whatever中,並執行css3 3d變換以獲得它的方式。