Επεξήγησαν σχήματα CSS: Πώς να σχεδιάσετε έναν κύκλο, ένα τρίγωνο και άλλα χρησιμοποιώντας το Pure CSS

Πριν ξεκινήσουμε. Αν θέλετε περισσότερο δωρεάν περιεχόμενο αλλά σε μορφή βίντεο. Μην χάσετε το κανάλι μου στο Youtube όπου δημοσιεύω εβδομαδιαία βίντεο στην κωδικοποίηση του FrontEnd.

//www.youtube.com/user/Weibenfalk

----------

Είστε νέοι στην ανάπτυξη ιστού και CSS; Αναρωτηθήκατε ποτέ πώς κατασκευάζονται αυτά τα ωραία σχήματα που βλέπετε σε όλο το Διαδίκτυο; Μην αναρωτιέσαι άλλο. Έχετε έρθει στο σωστό μέρος.

Παρακάτω θα εξηγήσω τα βασικά στοιχεία της δημιουργίας σχημάτων με CSS. Υπάρχουν πολλά να σας πούμε για αυτό το θέμα! Επομένως, δεν θα καλύψω όλα (πολύ από όλα) τα εργαλεία και τα σχήματα, αλλά αυτό θα σας δώσει μια βασική ιδέα για το πώς δημιουργούνται τα σχήματα με το CSS.

Ορισμένα σχήματα απαιτούν περισσότερο "fix and tricks" από άλλα. Η δημιουργία σχημάτων με CSS είναι συνήθως ένας συνδυασμός χρήσης πλάτους, ύψους, πάνω, δεξιά, αριστερά, περίγραμμα, κάτω, μετασχηματισμός και ψευδο-στοιχεία όπως : πριν και : μετά. Έχουμε επίσης πιο σύγχρονες ιδιότητες CSS για τη δημιουργία σχημάτων με σχήμα σχήματος έξω και κλιπ-διαδρομή. Θα τα γράψω παρακάτω.

CSS Shapes - Ο βασικός τρόπος

Χρησιμοποιώντας μερικά κόλπα στο CSS έχουμε πάντα τη δυνατότητα να δημιουργήσετε βασικά σχήματα, όπως τετράγωνα , κύκλους , τρίγωνα και με τακτικές ιδιότητες CSS. Ας δούμε μερικά από αυτά τώρα.

Τετράγωνα και ορθογώνια

Τα τετράγωνα και τα ορθογώνια είναι πιθανώς τα ευκολότερα σχήματα. Από προεπιλογή, ένα div είναι πάντα ένα τετράγωνο ή ένα ορθογώνιο.

Ορίζετε το πλάτος και το ύψος όπως φαίνεται στον παρακάτω κώδικα. Τότε είναι απλώς θέμα να δοθεί στο στοιχείο ένα χρώμα φόντου. Μπορείτε να έχετε οποιεσδήποτε άλλες ιδιότητες θέλετε στο στοιχείο.

#square { background: lightblue; width: 100px; height: 100px; }

Κύκλους

Είναι σχεδόν εξίσου εύκολο να δημιουργήσετε έναν κύκλο. Για να δημιουργήσουμε έναν κύκλο μπορούμε να θέσουμε την ακτίνα περιγράμματος στο στοιχείο. Αυτό θα δημιουργήσει καμπύλες γωνίες στο στοιχείο.

Αν το θέσουμε στο 50% θα δημιουργήσει έναν κύκλο. Αν ορίσετε διαφορετικό πλάτος και ύψος, θα πάρουμε ένα οβάλ.

#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }

Τρίγωνα

Τα τρίγωνα είναι λίγο πιο δύσκολα. Πρέπει να ορίσουμε τα όρια στο στοιχείο ώστε να ταιριάζουν με ένα τρίγωνο. Ρυθμίζοντας το πλάτος και το ύψος στο μηδέν στο στοιχείο, το πραγματικό πλάτος του στοιχείου θα είναι το πλάτος του περιγράμματος.

Λάβετε υπόψη ότι τα άκρα περιγράμματος ενός στοιχείου είναι διαγώνια 45 μοιρών μεταξύ τους. Γι 'αυτό αυτή η μέθοδος λειτουργεί για να δημιουργήσει ένα τρίγωνο. Ορίζοντας ένα από τα σύνορα σε ένα συμπαγές χρώμα και τα άλλα σύνορα σε διαφανές θα έχει τη μορφή ενός τριγώνου.

#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }

Εάν θέλετε ένα τρίγωνο / βέλος να δείχνει προς άλλη κατεύθυνση Μπορείτε να αλλάξετε τις τιμές περιγράμματος που αντιστοιχούν σε ποια πλευρά θέλετε να είναι ορατή. Ή μπορείτε να περιστρέψετε το στοιχείο με την ιδιότητα μετασχηματισμού εάν θέλετε να είστε πραγματικά φανταχτερός.

 #triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }

Εντάξει - αυτό είναι μια εισαγωγή σε βασικά σχήματα με CSS. Υπάρχει πιθανώς μια ατελείωτη ποσότητα σχημάτων που μπορείτε να σκεφτείτε να δημιουργήσετε. Αυτές είναι μόνο οι βασικές αρχές, αλλά με λίγη δημιουργικότητα και αποφασιστικότητα μπορείτε να πετύχετε πολλά μόνο με βασικές ιδιότητες CSS.

Σε ορισμένες περιπτώσεις, με πιο προχωρημένα σχήματα, είναι επίσης καλή ιδέα να χρησιμοποιήσετε τα: μετά και: πριν από ψευδο επιλογείς. Αυτό είναι εκτός πεδίου εφαρμογής αυτού του άρθρου, ωστόσο, καθώς η πρόθεσή μου είναι να καλύψω τα βασικά για να ξεκινήσετε.

Μειονέκτημα

Υπάρχει ένα μεγάλο μειονέκτημα με την παραπάνω προσέγγιση. Για παράδειγμα, εάν θέλετε το κείμενό σας να ρέει και να τυλίγει το σχήμα σας. Ένα κανονικό div HTML με φόντο και περιγράμματα για τη σύνθεση του σχήματος δεν θα το επιτρέψει. Το κείμενο δεν θα προσαρμόζεται και θα ρέει γύρω από το σχήμα σας. Αντ 'αυτού θα ρέει γύρω από το ίδιο το div (το οποίο είναι ένα τετράγωνο ή ένα ορθογώνιο).

Ακολουθεί μια εικόνα που δείχνει το τρίγωνο και τον τρόπο ροής του κειμένου.

Ευτυχώς έχουμε κάποιες σύγχρονες ιδιότητες CSS για χρήση.

CSS Shapes - Ο άλλος τρόπος

Σήμερα έχουμε μια ιδιότητα που ονομάζεται σχήμα-έξω για χρήση στο CSS. Αυτή η ιδιότητα σάς επιτρέπει να ορίσετε ένα σχήμα στο οποίο θα τυλίγεται / θα ρέει το κείμενο.

Μαζί με αυτό το ακίνητο έχουμε μερικά βασικά σχήματα:

ένθεση()

κύκλος()

έλλειψη()

πολύγωνο()

Ακολουθεί μια συμβουλή : Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα clip-path . Μπορείτε να δημιουργήσετε το σχήμα σας με αυτό με τον ίδιο τρόπο, αλλά δεν θα αφήσει το κείμενο να τυλίγει γύρω από το σχήμα σας όπως το σχήμα έξω.

Το στοιχείο στο οποίο θα εφαρμόσουμε το σχήμα με την ιδιότητα σχήματος-έξω πρέπει να αιωρείται. Πρέπει επίσης να έχει καθορισμένο πλάτος και ύψος. Αυτό είναι πολύ σημαντικό να γνωρίζετε!

Μπορείτε να διαβάσετε περισσότερα για το γιατί εδώ. Ακολουθεί επίσης ένα κείμενο που έχω πάρει από τον παρεχόμενο σύνδεσμο προς το developer.mozilla.org.

Η shape-outsideιδιότητα καθορίζεται χρησιμοποιώντας τις τιμές από την παρακάτω λίστα, οι οποίες ορίζουν την περιοχή πλωτήρα για στοιχεία πλωτήρα. Η περιοχή πλωτήρα καθορίζει το σχήμα γύρω από το οποίο τυλίγεται το ενσωματωμένο περιεχόμενο (στοιχεία πλωτήρα).

ένθεση()

Ο τύπος ένθετου () μπορεί να χρησιμοποιηθεί για τη δημιουργία ορθογωνίου / τετραγώνου με προαιρετική μετατόπιση για το κείμενο περιτυλίγματος. Σας επιτρέπει να παρέχετε τιμές σχετικά με το πόσο θέλετε το επικαλυπτόμενο κείμενο να επικαλύπτει το σχήμα.

Μπορείτε να καθορίσετε το όφσετ να είναι το ίδιο και για τις τέσσερις κατευθύνσεις όπως αυτό: inset (20px). Ή μπορεί να ρυθμιστεί ξεχωριστά για κάθε κατεύθυνση: inset (20px 5px 30px 10px) .

Μπορείτε επίσης να χρησιμοποιήσετε άλλες μονάδες για να ρυθμίσετε την μετατόπιση, για παράδειγμα, τοις εκατό Οι τιμές αντιστοιχούν ως εξής: ένθετο (πάνω δεξιά κάτω αριστερά) .

Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; }

It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; }

circle()

In this one a circle is created using the shape-outside property. You also have to apply a clip-path with the corresponding property for the circle to show up.

The clip-path property can take the same value as the shape-outside property so we can give it the standard circle() shape that we used for shape-outside. Also, note that I've applied a 20px margin on the element here to give the text some space.

#circle { float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; }

In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.

The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.

In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.

I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.

 #circle { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; }

ellipse()

Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: ellipse(25px  50px).

The same as a circle, it also takes a position value as the last value.

 #ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; }

polygon()

A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.

#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; }

Images

Μπορείτε επίσης να χρησιμοποιήσετε εικόνες με διαφανές φόντο για να δημιουργήσετε το σχήμα σας. Όπως αυτό το στρογγυλό όμορφο φεγγάρι παρακάτω.

Αυτή είναι μια εικόνα .png με διαφανές φόντο.

#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }

Και αυτό είναι! Ευχαριστούμε που το διαβάσατε.

Σχετικά με τον συγγραφέα αυτού του άρθρου

Το όνομά μου είναι Thomas Weibenfalk και είμαι προγραμματιστής από τη Σουηδία. Δημιουργώ τακτικά δωρεάν μαθήματα στο κανάλι μου στο Youtube. Υπάρχουν επίσης μερικά premium μαθήματα εκεί έξω για το React και το Gatsby. Μη διστάσετε να με επισκεφθείτε σε αυτούς τους συνδέσμους:

Twitter - @weibenfalk,

Weibenfalk στο Youtube,

Ιστότοπος μαθημάτων Weibenfalk.