Html 如何在css中生成矢量背景图像，而不是使用jpg或png

我看到并尝试采用css而不是jpeg或png图像作为背景。看起来像这样：

---

它是用css设计的，但我不知道怎么做。我认为这是一个SVG。有人能帮忙吗

如果要将其嵌入到代码中

如下所示创建svg文件，并将其命名为test.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="200.000000pt" height="126.000000pt" viewBox="0 0 200.000000 126.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,63.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path id="path" d="M340 605 c-71 -16 -175 -20 -242 -10 -30 4 -49 2 -63 -9 -19 -14 -20
-28 -23 -268 -3 -233 -1 -256 15 -276 17 -21 25 -22 173 -21 277 2 409 2 755
2 562 0 597 -1 804 -4 150 -2 203 0 214 10 14 11 16 53 17 281 1 320 11 299
-132 274 -84 -14 -103 -14 -208 0 -272 37 -287 37 -398 16 -86 -17 -113 -18
-176 -9 -60 8 -92 7 -159 -6 -69 -13 -99 -14 -173 -5 -321 40 -332 41 -404 25z"/>
</g>
</svg>

和主html文件，如下所示：

<div id="red">Download Now</div>
<div id="orange">Download Now</div>

立即下载
现在下载

您可以使用这样的css来制作您想要的东西

.box{
背景色：#ff3000；/*适用于较旧的浏览器*/
背景图像：-webkit线性渐变（90度，#ff3000 0%，#ff3000 31%，#ffffff 32%，#ffffff 70%，#ff3000 71%，#ff3000 100%）；
背景图像：线性梯度（0度，#ff3000 0%，#ff3000 31%，#ffffff 32%，#ffffff 70%，#ff3000 71%，#ff3000 100%）；
宽度：500px；
高度：200px；
}

png作为背景图像有什么问题？是否可以在不使用img的情况下使用css代码实现这一点？就像我们可以按上面的按钮进行俯冲和重塑俯冲一样？是的。你是绝对正确的，你能用这个技巧制作上面的图片（下载背景）吗。我没有弄清楚sorrry。我想做下载的背景。文本下载它本身就是一个纯文本，这次想让后台看看代码。我有更新…我有很多按钮在我的页面上，我必须使用这个模型的每个按钮，但颜色将是不同的。如何获得这个。请帮助我。为此，您需要一个具有一般背景颜色的svg文件，并且需要在需要时更改其颜色。我想制作框的边缘。不是颜色。如何像上面那样做盒子的边缘（我的例子）

<div id="red">Download Now</div>
<div id="orange">Download Now</div>