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

【问题标题】：How can I make a div with irregular shapes with css3 and html5?如何使用 css3 和 html5 制作不规则形状的 div？
【发布时间】：2012-08-21 00:58:56
【问题描述】：

我想知道是否有可能构建具有不规则形状的 div，类似于此（例如格陵兰、欧洲、非洲）。我想使用 CSS3 和 HTML5 创建像这里这样的地图。

这是一个示例图片的链接：

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

你所拥有的看起来像一个网格，你可以在一个 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... -->

【讨论】：

【解决方案2】：

元素一直是矩形的。不过，您可以通过在矩形分区内绘制 CSS 形状并安排不同的分区（使用 z-index 等）来模拟其他形状。这将帮助您：

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

【讨论】：

【解决方案3】：

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

【讨论】：