假设我有一个像这样的多边形图像PNG文件（没有边框，形状用一种颜色填充，没有渐变，图像的背景是透明的）http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
我正在考虑将该多边形图像用作背景图像，当用户将鼠标悬停在其上时，它将被更改（到另一个具有不同颜色的图像）。
但我也希望背景图像的颜色可以自定义。所以，我在想是否有可能绘制多边形而不是使用图像文件，以便颜色可以自定义（我不认为为一种颜色创建一个文件是一个好主意，依此类推） 。
background-image并使用您想要的任何background-color。使用它来转换图像：http://codepen.io/blazeeboy/pen/bCaLE我认为使用转换后的图像要好得多，因为浏览器可以更快地加载它们。
我认为CSS是错误的用法。是的，可以使用CSS创建很多形状，但是有一些限制，无论如何，使用CSS绘制形状有点像黑客，即使它只是一个简单的三角形。
而不是CSS，我建议SVG是适合这项工作的工具。
SVG是可以嵌入到站点中的矢量图形的图形格式，可以直接在站点内通过Javascript创建或更改。更改简单多边形的颜色和形状与使用SVG一样简单。
使用SVG的另一个好处是，因为它是矢量图形，所以它是可扩展的，因此您可以以任何大小显示它。
SVG的唯一缺点是旧版本的IE（IE8及更早版本）不支持它。但是，这些浏览器确实支持一种称为VML的替代语言，并且存在几个可以与之兼容的好的Javascript库，从而允许您完成跨浏览器的兼容性。我推荐的是Raphael.js。
这是一个很小的（也很容易）的Javascript代码，而不是一个非常混乱的CSS。对我来说似乎是一个胜利者。
也许你可以使用这个：https://javier.xyz/img2css/，原则是使用box-shadow，如果图片很小就很好，所以你应该考虑性能