html - 自定义形状表格

Question

我有一个适合自定义形状的表格。问题是如果附加更多输入，如何扩展这个形状。我尝试:

• SVG 形状，但 SVG 不能包含 HTML 元素

• CSS 剪辑路径，但是...兼容性http://caniuse.com/#search=clip-path

• 背景图像 SVG，不适用于背景大小，无法向一个方向缩放

• 背景图像 PNG/JPG，缩放后质量差

Answer 1

缩放光栅图像时质量不佳还取决于该图像的原始(像素)大小。鉴于它只是一个具有相同颜色的大表面，PNG 图像的文件大小应该非常小，即使在更大的比例下也是如此。例如，像 2000x2000 像素 PNG 图像上的形状将占用不到 60KB，尤其是当您应用 PNGCrush 时。 .

您可以查看的另一种选择是 canvas .在 Canvas 上，您可以自己绘制形状。 Canvas support比 clip-path (IE 9+) 好很多。