Πώς να δημιουργήσετε έναν ημικύκλιο με CSS

' στοιχείο μέσα στην ετικέτα σώματος του αρχείου HTML μας.

---

---

HTML

< div >< / div >

Τώρα, ορίστε τις κατάλληλες διαστάσεις για το div, όπως θα εκχωρήσουμε το ' πλάτος 'αξία ακινήτου ως ' 180 εικονοστοιχεία ' και ' ύψος “Ακίνητο με αξία” 90 εικονοστοιχεία '. Στο επόμενο βήμα, ορίστε το ' σύνορα-ακτίνα ' αξία περιουσίας ' 12 εκ. 12 εκ. 0 0 ”? όπου το πρώτο ψηφίο 12rem θα κόψει την επάνω αριστερή πλευρά του div, το δεύτερο 12rem θα κόψει την επάνω δεξιά πλευρά, το τρίτο και το τέταρτο ψηφίο 0 θα κόψουν το ολοκάτω μέρος του div. Τέλος, για να δώσετε ένα χρώμα στον κύκλο, χρησιμοποιήστε το ' χρώμα του φόντου “ακίνητο με την αξία” μωβ '.

CSS

div {
πλάτος : 180 εικονοστοιχεία ;
ύψος : 90 εικονοστοιχεία ;
σύνορα-ακτίνα : 12 εκμ 12 εκμ 0 0 ;
χρώμα του φόντου : μωβ ;
}

Αποθηκεύστε το αρχείο HTML με τον αναφερόμενο κώδικα και ανοίξτε το στο πρόγραμμα περιήγησής σας:

Όπως μπορείτε να δείτε, δημιουργήσαμε με επιτυχία έναν ημικύκλιο με ιδιότητα CSS border-radius.

Παράδειγμα 2: Δημιουργήστε έναν ημικύκλιο από το κάτω μέρος με CSS

Για το σχηματισμό ενός ημικύκλου από το κάτω μέρος, θα ορίσουμε τις τιμές ιδιοτήτων ακτίνας περιγράμματος ως ' 0 0 12 εκ. 12 εκ ”, όπου οι δύο πρώτες τιμές αντιπροσωπεύουν την επάνω αριστερή και πάνω δεξιά ακτίνα περιγράμματος. Τα έχουμε βάλει στο 0 για να εξαφανιστεί τελείως το πάνω μισό του div. Για το κάτω μέρος, έχουμε περικόψει μόνο λίγο κάτω αριστερά και κάτω δεξιά, ορίζοντας τις τιμές σε 12rem.

CSS

div {
πλάτος : 180 εικονοστοιχεία ;
ύψος : 90 εικονοστοιχεία ;
σύνορα-ακτίνα : 0 0 12 εκμ 12 εκμ ;
χρώμα του φόντου : μωβ ;
}

Παραγωγή

Παράδειγμα 3: Δημιουργήστε έναν ημικύκλιο από τα δεξιά με CSS

Για να φτιάξετε ένα ημικύκλιο CSS προς τα δεξιά, προσαρμόστε πρώτα το ύψος και το πλάτος του δοχείου καθώς είναι απαραίτητο για να αποκτήσετε το σωστό σχήμα του κύκλου. Ρυθμίστε το ' πλάτος ' όπως και ' 90 εικονοστοιχεία ' και ' ύψος ' όπως και ' 180 εικονοστοιχεία ' αυτή τη φορά. Και πάλι, χρησιμοποιήστε την ιδιότητα border-radius με την τιμή ' 0 12 εκ. 12 εκ. 0 ”, όπου η πρώτη τιμή 0 είναι για την επάνω αριστερή πλευρά, η τελευταία τιμή 0 είναι για την κάτω αριστερή πλευρά και η δεύτερη και η τρίτη τιμή προστίθενται για την περικοπή της επάνω δεξιάς και κάτω δεξιάς πλευράς. Η εφαρμογή αυτών των τιμών θα σχηματίσει ένα ημικύκλιο από τα δεξιά.

CSS

div {
πλάτος : 90 εικονοστοιχεία ;
ύψος : 180 εικονοστοιχεία ;
σύνορα-ακτίνα : 0 12 εκμ 12 εκ 0 ;
χρώμα του φόντου : μωβ ;
}

Παραγωγή

Παράδειγμα 4: Δημιουργήστε έναν ημικύκλιο από αριστερά με CSS

Αυτή τη φορά, καθορίστε την ιδιότητα border-radius κατά μήκος της τιμής ' 12 εκ. 0 0 12 εκ ”? Η πρώτη και η τελευταία τιμή 12rem θα περικόψουν την επάνω αριστερή και κάτω αριστερή πλευρά του div, θέτοντας τη δεύτερη και την τρίτη τιμή στο 0 θα καταστήσουν σαφή την επάνω δεξιά και κάτω δεξιά πλευρά του κύκλου. Τελικά, θα δημιουργηθεί το αριστερό ημικύκλιο μας.

CSS

div {
πλάτος : 90 εικονοστοιχεία ;
ύψος : 180 εικονοστοιχεία ;
σύνορα-ακτίνα : 12 εκ 0 0 12 εκ ;
χρώμα του φόντου : μωβ ;
}

Παραγωγή

Προσφέραμε διαφορετικές μεθόδους για τη δημιουργία ημικύκλου με CSS.

συμπέρασμα

Για να δημιουργήσουμε ένα ημικύκλιο, μπορούμε απλά να χρησιμοποιήσουμε το CSS ' σύνορα-ακτίνα ” ιδιοκτησία. Το ημικύκλιο μπορεί να δημιουργηθεί από πλευρά σε πλευρά, όπως αριστερά, δεξιά, πάνω και κάτω. Στην ιδιότητα border-radius, η αρχική τιμή είναι για την επάνω αριστερή πλευρά, η δεύτερη είναι για την επάνω δεξιά, η τρίτη είναι για την κάτω δεξιά και η τέταρτη τιμή είναι για την κάτω αριστερή πλευρά. Αυτή η εγγραφή έχει εξηγήσει πώς να δημιουργήσετε ένα ημικύκλιο με CSS.