是否可以在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中创建多边形形状的元素？

回答

相关问题