Question

我目前正试图制作一个形状为梯形的button。我发现了一种创建形状的方法，其中涉及CSS制作边框等。 CSS方法的工作方式与形成形状有关，但我遇到了一个问题，整个元素都包含在一个矩形中，所以当你点击梯形外面的白色空格时，它仍然会记录为元件。

简而言之，我试图让HTML元素成为梯形的形状，而不仅仅是可见的形状本身。因此，当用户单击按钮周围可见梯形外的任何区域，但可能在按钮矩形的实际边界内时，应忽略该点击。感谢。

编辑：有人问我展示了我的意思。 http://jsfiddle.net/MichaelMitchell/aR72g/9/ 在此链接中，有红色梯形，但您可以看到背景颜色也是绿色，当您单击绿色时，它仍会激活onclick。换句话说，我只希望红色能够触发onclick。

Answer 1

如果您不愿意执行涉及map属性和图像（see docs）的诡计，则HTML中不能有其他可点击区域而不是矩形，但即使这样，您的图像也将始终包含在矩形边界中框（因此您只能通过使用具有透明度的图像假装具有不同的形状并且说map）。

Answer 2

您可以通过给它一个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>

是否可以在HTML中创建多边形元素？

2 个答案: