CSS, Sass Formen

JeffDavis · 13. März 2019

Hallo,

ich bin gerade dabei ein kleines UI zu machen, indem man verschiedene Dinge des Fahrzeuges in GTA V steuern kann. Mir geht es darum, dass ich um einen Kreis in der Mitte solche Dreiecke - wie beim GTA V Waffenrad - als Buttons einfüge, welche man dann auswählen kann. Ich habe es mit CSS schon versucht. Ein Dreieck bekommt man gleich mal hin, nur funktioniert es nicht so, wie ich es mir vorstelle. Ist es denn nicht irgendwie möglich, das ganze mit Koordinaten zu zeichnen o.ä.? Ich glaube mal nicht, dass ich das ganze mit CSS oder Sass hinbekomme... habt ihr Vorschläge?

https://codepen.io/fabianlederer/pen/JzMYEX

Cr3ed · 13. März 2019

Habe dir mal ein beispiel gemacht wie du ein Arrow beim Hover vom Start/Stop Button Rechts hast.
https://codepen.io/DecusDE/pen/XGVjbN?editors=1100

Um dann das Waffenrad von GTA V zu realisieren musst du nur noch die Waffen Slots erstellen und darauf den das Beispiel was ich dir geschickt habe anwenden und den arrow kannst du drehen damit der auch auf den Slot zeigt.

/Edit: habe dir auch ein beispiel gegeben wie du diesen arrow drehen kannst, ist als kommentar hinterlegt.

Edgar · 13. März 2019

Hallo.

Ich glaube er sucht eher nach so was: https://codepen.io/MrSimsek/pen/KrOdpO
Wenn es mich nicht täuscht.

MrSimsek hat es mit SVGs realisiert.

JeffDavis · 13. März 2019

Ja, sowas ähnliches. Aber danke, habe das nicht gefunden

Edgar · 13. März 2019

Du kannst das ganze auch mit Canvas und Javascript verwirklichen. Siehe dir dazu dieses Beispiel an:
http://dougtesting.net/winwheel/examples/hollow_wheel

Die Mitte (als auch das Stativ) ist nur der Hintergrund, welcher über CSS eingebunden wurde.
Kannst damit ja etwas herumspielen.

breadfish.de 12. März 2022