html - 使用 html 元素创建自定义形状

Question

我需要创建这个形状：

这张图片中的界限不清楚，但实际上这是规则曲线。内圈是我的内在元素。我在实现这个元素时遇到了一些挑战：

• 我用过<div>，但我不能用border-radius和任何其他方法来设置顶部边框。
• 使用<div>并设置background-image它，但我在边界上有问题，我想在元素边界中准确地更改鼠标光标。
• 我使用<img>并设置它<map>来<area>设置我的界限，但我的内部元素有问题。
• 最后我使用了 HTML5 和 canvas 元素，但是对于内部元素，圆圈，我找不到任何常规的解决方案。元素的边界非常重要

我怎样才能实现这个对象？

Answer 1

您几乎可以使用 HTML5 Canvas。从你的问题我读到你无法确定圆圈的边界来改变光标。检测光标是否在一个圆圈内实际上很容易。您肯定会拥有圆心的 x,y 位置以及半径，对吗？因此，您需要做的就是检查光标的 x/y 坐标与圆心之间的距离是否小于（或等于）半径。如果是，那么它在圈内，否则它在圈外:)