如何制作非标准形状按钮，不能在其边框外单击

Question

我希望能够使用html和css在网页上创建按钮。 按钮应该是非标准形状，如从一侧开始的矩形，从另一侧开圆，等等。

第一个问题是如何做到这一点，第二个问题是如何制作它，以便在点击它的圆形边框之外点击它是不可点击的。 这是使代码循环的CSS代码，

.buttons
{
    height: 50px;
    width: 50px;
    border-radius: 50px;
    border: 1px solid #000;
}

如果您尝试使用此代码，并在按钮的圆形区域外单击，则会单击，但是如果不在其内部边框内单击，我希望它不会被删除。

Answer 1

这超出了您的控制范围。将border-radius应用于元素时，无论如何它在框模型中仍然是矩形的 - 您正在应用的是一种不同的渲染样式，使其看起来四舍五入。标准也没有规定这对元素的点击区域意味着什么。

最近的一些浏览器似乎更尊重border-radius点击区域，但是由浏览器供应商决定是否实施，并且您没有黑客攻击它没有明确的影响力用Javascript来计算用户点击的位置。

UPDATE：

我用this Fiddle尝试过，结果很有趣：

• Firefox最新稳定看到一个矩形
• Chrome最新测试版看到一个矩形
• IE10（!!!）'正确'忽略形状外的点击

如上所述，它在标准中是未定义的行为，因此如果它有效，请将其视为奖励。

Answer 2

您无法在HTML中控制此类内容。正如@Niels所说，这取决于供应商。

但是，我认为你可以在SVG中做到这一点。