html - 如何创建全宽 svg 矩形背景？

Question

你好，我是 svg 的新手，我想创建这样的东西:

Both ways would be cool but I dont mind to use the easier one

这是我的代码:

<div class="row">
  <div class="col-lg-4 col-md-6">
    <div class="single-product">
      <div class="thumb">
        <img src="img/p1.png" alt="">
      </div>
      <div class="details">
        <h4>Lorem ipsum </h4>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        </p>
      </div>
    </div>
  </div>

Answer 1

使用 Adob​​e Illustrator 绘制您的对象，然后将其保存为 SVG，您可以复制它提供给您的代码路径，它会为您生成它!

如果你只是做一个矩形，虽然你不需要使用 svg，你肯定可以使用 css 吗？

https://helpx.adobe.com/uk/illustrator/how-to/export-svg.html