Wie kann ich mit css3 und html5 ein div mit unregelmäßigen Formen erstellen?

Question

Ich frage mich, gibt es eine Möglichkeit, div mit unregelmäßigen Formen zu bauen, etwas Ähnliches (z. B. Grönland, Europa, Afrika). Ich möchte eine Karte wie hier mit CSS3 und HTML5 erstellen.

Hier Link zu einem Beispielbild:

Answer 1

Elemente sind immer rechteckig gewesen. Dennoch können Sie andere Formen simulieren, indem Sie CSS-Formen innerhalb der rechteckigen Teilung zeichnen und verschiedene Unterteilungen (mit Z-Index usw.) anordnen. Dies wird Ihnen helfen:

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

Answer 2

Was haben Sie wie ein Gitter es aussieht, die Sie entweder mit vielen Steigungen auf einem div erhalten können, entweder mit einem Raster von vielen divs auf welche Sie CSS-Transformationen anwenden (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

, wenn Sie genau unregelmäßige Grenzen gemacht werden soll, gehen Sie für HTML Image-Maps (immer noch eine bessere Lösung als css und absolute Positionierung), versuchen Sie dies http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

Sie sollten in der Lage sein, deine Karte als Quadrate zu erstellen, mit allen Elementen, die du wählst, und dann das Ganze in ein div/span/was auch immer bringen und eine css3 3d Transformation ausführen, um es so zu bekommen, wie du es brauchst.