是否可以在HTML中創建多邊形形狀的元素？

我目前正在嘗試製作一個button，它的形狀是梯形。我發現了一種創建涉及CSS製作邊界等的形狀的方法。 CSS方法的工作方式，它使形狀，但我碰到一個問題，其中整個元素包含在一個矩形，所以當你點擊梯形以外的空白時，它仍然會註冊爲一個點擊元素。是否可以在HTML中創建多邊形形狀的元素？

總之，我試圖讓HTML元素成爲梯形的形狀，而不僅僅是可見的形狀本身。因此，當用戶單擊可見梯形外的按鈕周圍的任何區域，但可能位於按鈕矩形的實際邊界內時，它應該忽略該點擊。謝謝。

編輯：有人問我展示了我的意思。 http://jsfiddle.net/MichaelMitchell/aR72g/9/ 在這個鏈接中，有紅色的梯形，但你可以看到背景顏色也是綠色的，當你點擊綠色時它仍然激活onclick。換句話說，我只想讓紅色能夠觸發onclick。

來源

2012-11-20 MichaelMitchell

請提供您正在使用的代碼。也嘗試設置問題的http://jsfiddle.net。 – bPratik

不，不可能。除非你使用canvas或SVG來完成整個事情。 –

你不能有比HTML矩形其他可點擊區域，如果你是不是願意做涉及map屬性和圖像（see docs）掛羊頭賣狗肉，但即使如此，你的形象將永遠包裹在矩形邊框（所以你只能裝作通過使用具有透明度的圖像來具有不同的形狀並且稱爲map）。

來源

2012-11-20 23:09:00

我很害怕我必須這樣做。是否需要你在圖像上做，或者你可以在任何其他元素上做到這一點？ – MichaelMitchell

它只是圖片地圖。 –

您可以通過給它一個onmousemove事件來解決這個問題，該事件確定該座標是否實際位於梯形內，並相應地添加/刪除onclick事件。例如：

<figure id ="trapezoid" onmousemove="trapezoidMouseMove(event)"> 

<p>Button</p> 
</figure> 

<script> 
function trapezoidClick(e) 
{ 
    //Whatever you need it to do 
    alert("inside"); 
} 

    function trapezoidMouseMove(e) 
    { 
     //Fill in the angle of your trapezoid 
     angle = Math.PI/4; 
     insideLeft = e.offsetX > Math.tan(angle) * e.offsetY; 
     insideRight = e.offsetX < e.toElement.offsetWidth - Math.tan(angle) * e.offsetY; 
     if (insideLeft && insideRight) 
     { 
      e.toElement.style.cursor = "pointer"; 
      e.toElement.onclick = trapezoidClick; 
     }else{ 
      e.toElement.style.cursor = "default"; 
      e.toElement.onclick = null; 
     } 
    } 
</script>

來源

2015-04-23 19:46:49

是否可以在HTML中創建多邊形形狀的元素？

回答

相關問題