我想知道是否有可能构建具有不规则形状的 div,类似于此(例如格陵兰、欧洲、非洲)。我想使用 CSS3 和 HTML5 创建像这里这样的地图。
这是示例图像的链接:
我想知道是否有可能构建具有不规则形状的 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... -->
元素一直是矩形的。不过,您可以通过在矩形分区内绘制 CSS 形状并安排不同的分区(使用 z-index 等)来模拟其他形状。这将帮助您:
您应该能够使用您选择的任何元素将地图创建为正方形,然后将整个东西包装在 div/span/whatever 中并执行 css3 3d 转换以获得您需要的内容。