Tortengrafik mit CSS wie einen Rahmen und Beschriftung machen

[Sargon]

Ich versuche gerade für meine Anwesenheitsvisualisierung eine Tortengrafik mit 5 Segmenten (5 Familienmitglieder) zu erstellen. Das nach langem Probieren auch einigermaßen geklappt aber ich scheitere daran die einzelnen Segmente mit einem Rahmen zu versehen und die einzelnen Segmente zu beschriften, ohne jeweils weitere Univeralelemente (weißer Kreis im Hintergrund und jeweils ein Label für jedes Familienmitglied) dafür zu verwenden.

Torte.JPG
CSS Eigenschaft meines Universalelements

height: 600px; width: 600px; border-radius:50%; -webkit-clip-path:polygon(50% 50%, 50% 0%, 100% 0%,100% 33.745%); content: att("Marion"); transform:rotate(-72deg) translate(3px,-3px);

Eigenschaft.JPG

So soll es mal fertig aussehen

Fertig.JPG

Hat jemand einen Tipp für mich wie ich funktioniert, die einzelnen Segmente mit einem Rahmen zu versehen sowie sie zu beschriften, wie oben zu sehen ist. Auch gern Optimierungen von dem was ich aktuell habe.

[Sargon]

Hat keiner einen Tipp für mich?

[vento66]

ohne jeweils weitere Univeralelemente (weißer Kreis im Hintergrund und jeweils ein Label für jedes Familienmitglied) dafür zu verwenden.

Wird Dir aber nichts anderes übrig bleiben, Du willst ja sicherlich die Segmente je nach Anwesenheit auch farblich darstellen. Ich würde

• einen Kreis als Hintergrund machen Hintergrund Transparent / Rand weiß
• die Sektoren mit Universalelementen mit ca 2px Breite trennen
• darüber deine Segmente in Transparent / Farbe für die Anzeige der Anwesenheit
• die Icons und Beschriftungen darüber legen
• darüber den inneren Kreis legen

[Sargon]

Ja so habe ich es aktuell (fast) gelöst.
Hatte gehofft ich könnte noch Elemente einsparen. Mir geht es um die Segmente, die sollen wenn es irgendwie geht einen weißen Rand bekommen und halt noch die Beschriftung.