Html 如何使用css3和html5制作不规则形状的div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12126731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a div with irregular shapes with css3 and html5?
提问by Rafath
I'm wondering is there any possibility to build div with irregular shapes, something, similar to this (e.g. Greenland, Europe, Africa). I want to create map like here with using CSS3 and HTML5.
我想知道是否有可能构建具有不规则形状的 div，类似于此（例如格陵兰、欧洲、非洲）。我想使用 CSS3 和 HTML5 创建像这里这样的地图。
Here is link to an example image:
这是示例图像的链接：
回答by Ana
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 (DEMO).
您拥有的看起来像一个网格，您可以通过 div 上的许多渐变获得它，或者使用在其上应用 CSS 转换 ( DEMO)的许多 div 的网格。
HTML:
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:
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;
}
回答by Navaneeth
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:
元素一直是矩形的。不过，您可以通过在矩形分区内绘制 CSS 形状并通过排列不同的分区（使用 z-index 等）来模拟其他形状。这将帮助您：
回答by SangeethK
if you want exact irregular borders to be made,go for HTML image maps(still a better solution than css and absolute positioning) , try this http://www.svennerberg.com/examples/imagemap_rollover/
如果您想要制作精确的不规则边框，请使用 HTML 图像地图（仍然是比 css 和绝对定位更好的解决方案），试试这个http://www.svennerberg.com/examples/imagemap_rollover/
回答by gazhay
You should be able to create your map as squares, with whatever elements you choose, and then wrap the whole thing in a div/span/whatever and perform a css3 3d transform to get it how you need it.
您应该能够使用您选择的任何元素将地图创建为正方形，然后将整个内容包装在 div/span/whatever 中并执行 css3 3d 转换以使其符合您的需要。
