在网页中绘制形状

Question

我必须在我的网站上制作一些形状，我需要为形状添加一些背景，当我悬停光标时它应该改变背景，我如何开发它，我可以使用纯css或html开发它画布是必需的，我在这里附加形状的演示图像。对于下面给出的图像，每个部分是不同的形状。任何小帮助将不胜感激

Answer 1

我使用svg怎么样

＆＃13;

＆＃13;

<svg width="1000" height="1000">

  <defs>
    <pattern id="image1" width="200" height="100">
      <image xlink:href="https://placekitten.com/g/200/302" width="300" height="200" x="-100" />
    </pattern>
  </defs>

  <defs>
    <pattern id="image2" width="200" height="100">
      <image xlink:href="https://placekitten.com/g/200/300" width="300" height="200" x="-100" />
    </pattern>
  </defs>

  <defs>
    <pattern id="image3" width="200" height="100">
      <image xlink:href="https://placekitten.com/g/200/301" width="300" height="200" x="-100" />
    </pattern>
  </defs>

  <defs>
    <pattern id="image4" width="200" height="100">
      <image xlink:href="https://placekitten.com/g/200/302" width="300" height="300" x="-100" y="10" />
    </pattern>
  </defs>

  <path d="m 100 20 l 100 0 -20 100 -100 0" stroke="orange" fill="url(#image1)" />
  <path d="m 80 120 l 100 0 -20 100 -100 0" stroke="green" fill="url(#image2)" />
  <path d="m 60 220 l 100 0 -20 100 -100 0" stroke="blue" fill="url(#image3)" />
  <path d="m 210 60 l -50 260 100 0" fill="url(#image4)" />
  <path d="m 350 20 l -130 40 15 80 130 -40" fill="url(#image1)" />
  <path d="m 365 100 l -100 30 20 90 100 -30" stroke="green" fill="url(#image2)" />
  <path d="m 385 190 l -100 30 20 90 100 -30" stroke="green" fill="url(#image3)" />
</svg>

＆＃13;

＆＃13;

＆＃13;