html - 如何制作非标准形状按钮，在其边框之外不可点击

Question

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

第一个问题是如何做到这一点，第二个问题是如何做到这一点，如果在它的圆形边框之外点击一点，它就不会被点击。这是使按钮变为圆形的CSS代码，

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

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

score 3 · Accepted Answer

这是你无法控制的。当应用于border-radius一个元素时，无论如何它在盒子模型中仍然是矩形 - 您所应用的只是一种不同的渲染样式，使其看起来是圆形的。标准也没有指定这对元素的点击区域意味着什么。

一些较新的浏览器似乎尊重border-radius点击区域，但这取决于浏览器供应商是否实施它，如果不破解一些 Javascript 来计算用户点击的位置，您就无法对其产生明确的影响。

更新：

我用这个 Fiddle试过，结果很有趣：

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

score 0 · Accepted Answer

你不能在 HTML 中控制这样的事情。正如@Niels 所说，这取决于供应商。

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