html - 如何在非标准形状的透明 PNG 后面创建背景颜色？

Question

我正在尝试创建一些带有编号标签的自定义 map 标记。这些标记可以是任何不同的颜色和数字，所以我希望在纯 CSS 中使用标记轮廓的透明 PNG 来完成。我遇到的问题是我在 DIV 上设置的背景颜色填充了一个矩形区域，但我需要它来填充标记轮廓边界内的内部区域。我发布了 JSFiddle这表明了我的意思——为了简单起见，我使用了一个基本的星形图标，但实际上我打算使用的标记更复杂，有许多交叉点、 Angular 等。创建具有可变背景颜色的动态标记的最佳方法是什么，简短在 PNG Sprite 中创造各种可能性？

来自 JSFiddle:

background-color:red;
background-image: url('data:image/png;base64...)

Answer 1

正如 C-link Nepal 评论的那样，您需要 svg。创建起来有点棘手，但它会解决你的问题。

<svg height="300" width="300">
<path style="fill:red;stroke:black;stroke-width:3;fill-rule:nonzero;"  
    d="
        M 100.000 70.000
        L 131.153 92.878
        L 119.021 56.180
        L 150.406 33.622
        L 111.756 33.820
        L 100.000 3.000
        L 88.244 33.820
        L 49.594 33.622
        L 80.979 56.180
        L 68.847 92.878
        L 100.000 70.000"
 />

请看这个fiddle以“明星”为例。