Làm cách nào để tạo một div có hình dạng không đều với css3 và html5?

Question

Tôi tự hỏi là có khả năng xây dựng div với hình dạng bất thường, một cái gì đó, tương tự như thế này (ví dụ: Greenland, Châu Âu, Châu Phi). Tôi muốn tạo bản đồ như ở đây với việc sử dụng CSS3 và HTML5.

Dưới đây là liên kết đến một hình ảnh ví dụ:

Answer 1

Elements luôn hình chữ nhật. Tuy nhiên, bạn có thể mô phỏng các hình dạng khác bằng cách vẽ các hình dạng CSS trong bộ phận hình chữ nhật và bằng cách sắp xếp các bộ phận khác nhau (với z-index, v.v.). Điều này sẽ giúp bạn:

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

Answer 2

gì bạn đã có trông giống như một mạng lưới mà bạn có thể có được một trong hai với nhiều gradient trên một div, hoặc với một mạng lưới các nhiều divs trên mà bạn áp dụng các biến đổi 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

nếu bạn muốn biên giới chính xác không thường xuyên được thực hiện, đi cho bản đồ hình ảnh HTML (vẫn còn một giải pháp tốt hơn so với css và định vị tuyệt đối), hãy thử này http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

Bạn nên có thể tạo bản đồ của bạn dưới dạng hình vuông, với bất kỳ yếu tố nào bạn chọn, và sau đó bọc toàn bộ thứ đó vào div/span/bất cứ điều gì và thực hiện chuyển đổi 3d css3 để có được cách bạn cần.