この形状を作成する必要があります:
この写真では境界が明確ではありませんが、実際にはこれは規則的な曲線です。内側の円は私の内側の要素です。この要素の実装にはいくつかの課題があります:
- 私は使用しまし
<div>たが、border-radius やその他の方法で上の境界線を作成することはできません。 - 使用
<div>して設定background-imageしましたが、境界に問題があり、マウスカーソルを要素の境界で正確に変更したいです。 - 私は境界を設定するために使用
<img>して設定<map>しましたが、内部要素に問題があります。<area> - 最後に、HTML5 とキャンバス要素を使用しましたが、内側の要素である円については、通常の解決策が見つかりません。要素の境界が非常に重要です
このオブジェクトを実装するにはどうすればよいですか?