我想知道是否有可能构建具有不规则形状的 div ，类似于此（例如格陵兰岛、欧洲、非洲）。我想使用 CSS3 和 HTML5 创建像这里这样的地图。
以下是示例图像的链接：
你所拥有的看起来像一个网格，你可以通过一个 div 上的许多渐变来获得它，也可以通过在其上应用 CSS 变换的许多 div 的网格来获得它。
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... -->
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
