Jak utworzyć div z nieregularnymi kształtami z css3 i html5?

Question

Zastanawiam się, czy istnieje jakakolwiek możliwość zbudowania div o nieregularnych kształtach, czegoś podobnego do tego (np. Grenlandia, Europa, Afryka). Chcę utworzyć mapę podobną do tej z użyciem CSS3 i HTML5.

Oto link przykładowego obrazka:

Answer 1

elementy zawsze były prostokątne. Można jednak symulować inne kształty, rysując kształty CSS w obrębie podziału prostokątnego i rozmieszczając różne podziały (z indeksem Z itp.). To pomoże Ci:

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

Answer 2

Co masz tam wygląda siatki, którą można uzyskać albo z wielu gradientów na div, albo z siatką wielu div na które stosujesz transformacje 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

jeśli chcesz dokładny nieregularne granice mają być wykonane, przejdź do map obrazów HTML (jeszcze lepsze rozwiązanie niż CSS i pozycjonowania absolutnego), spróbuj tego http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

Powinieneś umieć utworzyć mapę jako kwadraty, z dowolnymi elementami, które wybierzesz, a następnie zawiń całość w div/span/cokolwiek i wykonaj transformację 3d css3, aby uzyskać to, czego potrzebujesz.