Crea forme personalizzate con elementi html: html, css, html5, css3

Ho bisogno di creare questa forma:

I limiti non sono chiari in questa immagine, ma in realtà questa è una curva regolare. I cerchi interni sono i miei elementi interni. Ho qualche sfida con l'implementazione di questo elemento:

• Ho usato <div> e non posso il bordo superiore con raggio di confine e nessun altro metodo.
• Usato <div> e impostare background-image per questo ma ho problemi nei limiti e voglio cambiare il cursore del mouse esattamente nei limiti degli elementi.
• ero solito <img> e impostare <map> e <area> per aver impostato i miei limiti ma ho problemi con i miei elementi interiori.
• Infine ho usato l'HTML5 e l'elemento canvas ma per gli elementi interni, i cerchi, non riesco a trovare alcuna soluzione regolare. È molto importante il limite per elemento

Come posso implementare questo oggetto?

risposte:

Puoi praticamente usare HTML5 Canvas. Dalla tua domanda ho letto che non puoi determinare i limiti del cerchio per cambiare il cursore. Rilevare se il cursore si trova all'interno di un cerchio è piuttosto facile in realtà. Avrai sicuramente le posizioni x, y del centro del cerchio insieme al raggio giusto? Quindi tutto ciò che devi fare è controllare se la distanza tra il cursore "sx / y coordinate e il centro dei cerchi è inferiore a ( o uguale a) il raggio o meno. Se sì, allora è all'interno del cerchio, altrimenti è fuori :)