html - 是否可以在 HTML 中创建多边形元素?

标签 html

我目前正在尝试制作一个梯形的按钮。 我找到了一种创建形状的方法,其中涉及 CSS 制作边框等。 CSS 方法按照它制作形状的方式工作,但我遇到了一个问题,即整个元素都包含在一个矩形中,因此当您单击梯形外部的空白区域时,它仍会注册为单击元素。

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

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

最佳答案

如果您不愿意使用涉及 map 属性和图像 ( see docs ) 的技巧,除了 HTML 中的矩形之外,您不能有其他可点击区域,但即便如此,您的图像仍将始终包裹在矩形中边界框(因此您只能通过使用具有透明度的图像和所述 map 来假装具有不同的形状)。

关于html - 是否可以在 HTML 中创建多边形元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13483670/

相关文章:

html - 如何在 jquery mobile 中为可折叠集创建列表分隔符

html - 自定义 CSS 不会覆盖 Wordpress 主题上的 Bootstrap

javascript - 如何在所有国家/地区仅显示阿联酋标准时间、月份、年份

javascript - 如何使用正值控制 tabIndex 和元素的焦点捕获?

javascript - 绘制到 HTML5 Canvas 的图像在首次加载时无法正确显示

javascript - 当一组单元格的数量等于另一组单元格的数量时显示弹出消息

java - 什么是最好的 java html 解析器?

javascript - 使div粘在容器div的底部

javascript - 使用 Jquery 动态加载 html 的类。继续

javascript - Bootstrap 4 Button Group wrapping fix border-radius