Utwórz własny kształt z elementami HTML - html, css, html5, css3

Muszę utworzyć ten kształt:

Granice nie są jasne na tym zdjęciu, ale w rzeczywistości jest to regularna krzywa. Wewnętrzne kręgi to moje wewnętrzne elementy. Mam pewne wyzwanie związane z implementacją tego elementu:

• Użyłem <div> i mogę „górną granicę z promieniem granicznym i inną metodą.
• Używany <div> i nastaw background-image ale mam problem ze granicami i chcę zmienić kursor myszy dokładnie w granice elementu.
• użyłem <img> i nastaw <map> i <area> za to, żeby ustawić moje granice, ale mam problem z moimi wewnętrznymi elementami.
• W końcu użyłem HTML5 i elementu canvas, ale dla elementów wewnętrznych, kół, nie mogę znaleźć żadnego regularnego rozwiązania. To bardzo ważne granice elementu

Jak mogę zaimplementować ten obiekt?

Odpowiedzi:

Możesz prawie używać HTML5 Canvas. Z twojego pytania przeczytałem, że nie możesz określić granic okręgu, aby zmienić kursor. Określenie, czy kursor znajduje się w okręgu, jest całkiem proste. Na pewno będziesz miał pozycje x, y środka okręgu wraz z promieniem w prawo? Więc wszystko, co musisz zrobić, to sprawdzić, czy odległość między współrzędnymi kursora „sx / y a środkiem okręgów jest mniejsza niż ( lub równy) promieniu lub nie. Jeśli tak, to jest w kręgu, w przeciwnym razie jest na zewnątrz :)