在網頁上繪製形狀

Question

我必須在我的網站中製作一些形狀，我需要爲形狀設置一些背景，當我將光標懸停時，它應該改變背景，我如何開發它，我可以使用它開發它純CSS或HTML畫布是必需的，我在這裏附上形狀的演示圖像。爲每個部分下面給出的圖像是不同的形狀。任何小的幫助將不勝感激

Answer 1

這個怎麼樣，我用SVG

<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>