Erstelle CSS Semi-Circles

8

Ich habe einen gefüllten Kreis, der eine Zahl wie folgt enthält:

Wie würde ich das in zwei Halbkreise aufteilen, damit ich zwei verschiedene Zahlen darin speichern kann:

Mein CSS ist wie folgt:

%Vor%     
Eitan K 27.04.2016, 13:32
quelle

4 Antworten

9

Sie können border-radius

verwenden

%Vor% %Vor%

Oder Sie können SVG

verwenden

%Vor% %Vor%

Aktualisieren : Sie können auch einfach einen Kreis mit zwei Spannen erstellen und eine Zeile in der Mitte mit Pseudoklasse

hinzufügen

%Vor% %Vor%
    
Nenad Vracar 27.04.2016, 13:40
quelle
7

Sie müssen nur eine Zeile in der Mitte hinzufügen (entweder mit einem Pseudo-Element oder mit einem Farbverlauf wie im folgenden Abschnitt) und dann den Inhalt mit zwei span -Elementen darin platzieren.

%Vor% %Vor%

Oder Sie können es tun, wie im folgenden Ausschnitt, wo die Halbkreise mit einem Pseudo-Element erstellt werden.

%Vor% %Vor%

Oder Sie können sogar radial-gradient background verwenden. Dies ist nur eine andere Methode ( zum Spaß ) und ich empfehle diese Option nicht wirklich.

%Vor% %Vor%
    
Harry 27.04.2016 13:38
quelle
2

SVG-Lösung

Das scheint ein grafisches Problem zu sein. Also würde ich vorschlagen, SVG anstelle von CSS zu verwenden, um eine solche Form zu erstellen.

%Vor% %Vor%
    
Persijn 27.04.2016 14:10
quelle
1

%Vor% %Vor%
    
IonS 27.04.2016 13:53
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset kann Tabelle in Firefox nicht zentrieren