如何在css中制作矢量背景图像而不是使用jpg或png

Question

我已经看过并尝试使用css而不是jpeg或png图像来采用背景。看起来像这样：

它是用css设计的，但我不知道怎么做。我认为这是一个SVG。任何人都可以帮忙吗...

Answer 1

如果您想将其嵌入代码中，

按如下所示创建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>

将css放在您的文件中，如下所示：

 #orange{
 width:200px;
  height:63px;
  background-color: #FF931E;
  mask: url(test.svg);
  -webkit-mask-image: url(test.svg);
  text-align: center;
  //fill: #FF931E;
}
#red{
  width:200px;
  height:63px;
  background-color: red;
  mask: url(test.svg);
  -webkit-mask-image: url(test.svg);
  text-align: center;
}

和主html文件如下：

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

Answer 2

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

.box {
  background-color: #ff3000; /* For Older Browsers */
  background-image: -webkit-linear-gradient( 90deg, #ff3000 0%, #ff3000 31%, #ffffff 32%, #ffffff 70%, #ff3000 71%, #ff3000 100%);
  background-image: linear-gradient( 0deg, #ff3000 0%, #ff3000 31%, #ffffff 32%, #ffffff 70%, #ff3000 71%, #ff3000 100%);

  width: 500px;
  height: 200px;
}

<div class="box">

</div>