如何使用css3和html5制作不规则形状的div？

Question

I'm wondering is there any possibility to build div with irregular shapes, something, similar to this (eg Greenland, Europe, Africa). I want to create map like here with using CSS3 and HTML5.

Here is link to an example image:

Answer 1

What you have there looks like a grid, which you can obtain either with many gradients on a div, either with a grid of many divs on which you apply CSS transforms.

 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; }

 <div class='container'> <div class='grid'> <div class='grid-row'> <div class='grid-cell'></div> <div class='grid-cell high'></div> </div> <div class='grid-row'> <div class='grid-cell'></div> <div class='grid-cell high'></div> </div> </div> </div> <!-- and so on... -->

Answer 2

Elements have always been rectangular. Still, you can simulate other shapes by drawing CSS shapes within the rectangular division and by arranging different divisions (with z-index, etc.). This will help you:

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

Answer 3

如果你想要制作精确的不规则边框，那就去找HTML图像图（比css和绝对定位更好的解决方案），试试这个http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

您应该能够使用您选择的任何元素将地图创建为正方形，然后将整个内容包装在 div/span/whatever 中并执行 css3 3d 转换以使其符合您的需要。