Δημιουργός CSS Τριγώνου

Επιλέξτε κατεύθυνση, μέγεθος και χρώμα για να φτιάξετε ένα τρίγωνο από απλό CSS, και αντιγράψτε τον κώδικα. Χρησιμοποιείται το κλασικό τέχνασμα του div μηδενικού πλάτους/ύψους με διαφανή borders — χωρίς αρχεία εικόνας, χωρίς SVG, χωρίς clip-path — μόνο μερικές δηλώσεις border που κατανοεί κάθε browser.

Τι είναι αυτό το εργαλείο;

Το CSS δεν έχει ειδικό σχήμα τριγώνου, οπότε τα τρίγωνα φτιάχνονται με ένα γνωστό τέχνασμα: πάρτε ένα στοιχείο με μηδενικό πλάτος και ύψος, δώστε του ένα συμπαγές border στη μία πλευρά και διαφανή borders στις άλλες δύο γειτονικές πλευρές. Επειδή τα γειτονικά borders συναντιούνται σε γωνία 45 μοιρών, τα διαφανή borders στενεύουν σε μια αιχμή, αφήνοντας ορατό μόνο το έγχρωμο border ως τρίγωνο.

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

Πηγή: CSS Backgrounds and Borders Module Level 3, W3C — ορίζει πώς οι γειτονικές άκρες border συναντιούνται σε γωνία, ο μηχανισμός στον οποίο βασίζεται αυτή η τεχνική τριγώνου.

Γιατί να το χρησιμοποιήσετε;

Η ζωντανή προεπισκόπηση αποδίδει το πραγματικό τρίγωνο ώστε να επιβεβαιώσετε μέγεθος, κατεύθυνση και χρώμα πριν αντιγράψετε οτιδήποτε.
Καλύπτει και τις τέσσερις βασικές κατευθύνσεις — πάνω, κάτω, αριστερά, δεξιά — με ένα χειριστήριο.
Δεν χρειάζονται αρχεία εικόνας ή SVG — ένα τρίγωνο φτιαγμένο έτσι είναι απλώς λίγες γραμμές CSS.
Χρήσιμο για δείκτες tooltip, carets dropdown/accordion, προσαρμοσμένες κουκκίδες λίστας και απλά διακοσμητικά σχήματα.
Λειτουργεί εξ ολοκλήρου στον browser σας — τίποτα από όσα ρυθμίζετε δεν ανεβαίνει πουθενά.
Δωρεάν, χωρίς εγγραφή, λειτουργεί σε κινητά.

Πώς χρησιμοποιείται

Επιλέξτε κατεύθυνση — το τρίγωνο δείχνει πάνω, κάτω, αριστερά ή δεξιά ανάλογα με το ποια πλευρά παίρνει το συμπαγές border.
Ορίστε το μέγεθος — αυτό ελέγχει την τιμή border-width και στις τρεις πλευρές και καθορίζει πόσο μεγάλο εμφανίζεται το τρίγωνο.
Επιλέξτε ένα χρώμα για το ορατό (συμπαγές) border, το οποίο γίνεται το χρώμα γεμίσματος του τριγώνου.
Αντιγράψτε το παραγόμενο CSS και εφαρμόστε το σε ένα στοιχείο με width: 0 και height: 0 — ένα άδειο <div> ή ένα pseudo-element όπως ::before/::after λειτουργούν εξίσου καλά.

Παράδειγμα

Είσοδος

Κατεύθυνση: κάτω · Μέγεθος: 60px · Χρώμα: #ea580c

Έξοδος

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Για τρίγωνο που δείχνει προς τα κάτω, το συμπαγές χρώμα πηγαίνει στο border-top ενώ τα border αριστερά και δεξιά παραμένουν διαφανή — η αντίθετη πλευρά από την κατεύθυνση προς την οποία δείχνει το τρίγωνο.

Γιατί έχει σημασία το μηδενικό πλάτος και ύψος

Το τέχνασμα λειτουργεί μόνο επειδή το στοιχείο δεν έχει δικό του content box — width: 0 και height: 0 σημαίνουν ότι όλο το ορατό σχήμα προέρχεται αποκλειστικά από τα borders που συναντιούνται στο κέντρο. Αν το στοιχείο έχει οποιοδήποτε πλάτος ή ύψος, τα borders δεν στενεύουν πλέον σε καθαρή αιχμή και το σχήμα χαλάει. Αυτός είναι επίσης ο λόγος που η τεχνική λειτουργεί εξίσου καλά σε ένα άδειο <div> ή σε ένα pseudo-element ::before/::after με content: "" — δεν χρειάζεται πραγματικό περιεχόμενο, μόνο το border box.

Η τεκμηρίωση του MDN για την ιδιότητα CSS border καλύπτει πώς συνδυάζονται τα border-width, border-style και border-color, συμπεριλαμβανομένου του πώς τα borders σε γειτονικές πλευρές συναντιούνται διαγώνια (developer.mozilla.org/en-US/docs/Web/CSS/border) — το γεωμετρικό γεγονός πάνω στο οποίο βασίζεται όλη αυτή η τεχνική.

Συνηθισμένες χρήσεις τριγώνων CSS

Δείκτες tooltip και speech-bubble: ένα μικρό τρίγωνο (6–10px) τοποθετημένο στην άκρη ενός στρογγυλεμένου κουτιού, χρωματισμένο ώστε να ταιριάζει με το φόντο του κουτιού.
Carets dropdown και select: ένα μικρό τρίγωνο προς τα κάτω δίπλα σε ένα κουμπί ή select element που δείχνει ότι ανοίγει μενού.
Δείκτες accordion/επέκτασης: ένα τρίγωνο που δείχνει δεξιά και περιστρέφεται για να δείξει κάτω όταν μια ενότητα επεκτείνεται.
Προσαρμοσμένες κουκκίδες λίστας: ένα μικρό τρίγωνο που δείχνει δεξιά αντί για την προεπιλεγμένη κουκκίδα του browser, για ένα πιο ξεχωριστό στιλ λίστας.
Απλές γωνίες banner/ταινίας: ένα τρίγωνο χωμένο στη γωνία μιας κάρτας για να προσομοιώσει ένα εφέ διπλωμένης ταινίας.

Συνδυασμός με άλλα εργαλεία CSS

Τα τρίγωνα που χρησιμοποιούνται ως δείκτες tooltip συνήθως χρειάζονται μια αντίστοιχη σκιά για να ταιριάζουν οπτικά με το κουτί στο οποίο είναι προσαρτημένα — ο Δημιουργός Box Shadow παράγει αυτή τη σκιά. Για σχήματα UI πέρα από τρίγωνα (chevrons, αστέρια, εξάγωνα), το clip-path είναι γενικά η καλύτερη σύγχρονη προσέγγιση αντί να στοιβάζετε άλλα τεχνάσματα border.

→ Δημιουργός Box Shadow · Δημιουργός Border Radius

Συχνές ερωτήσεις

Γιατί το χρώμα πηγαίνει στο αντίθετο border από την κατεύθυνση προς την οποία δείχνει το τρίγωνο;

Φανταστείτε το στοιχείο ως ένα ρόμβο φτιαγμένο από τέσσερα τριγωνικά τμήματα border που συναντιούνται στη μέση. Αν το συμπαγές χρώμα είναι στο επάνω border, το ορατό σχήμα καταλαμβάνει το πάνω μισό — αλλά επειδή το στοιχείο έχει μηδενικό μέγεθος, αυτό το "πάνω μισό" τρίγωνο δείχνει στην πραγματικότητα προς τα κάτω, εκεί όπου θα ήταν το ανύπαρκτο content box του στοιχείου. Η ίδια λογική ισχύει και για τις τέσσερις κατευθύνσεις.

Μπορώ να φτιάξω ένα τρίγωνο που δεν είναι τέλειο ισοσκελές σχήμα;

Ναι — αυτό το εργαλείο παράγει πάντα ένα συμμετρικό τρίγωνο για απλότητα, αλλά μπορείτε να επεξεργαστείτε χειροκίνητα το αντιγραμμένο CSS στη συνέχεια. Κάνοντας τα δύο διαφανή border-widths άνισα λοξεύει το τρίγωνο προς μια πλευρά· αλλάζοντας το πλάτος του συμπαγούς border ανεξάρτητα αλλάζει το ύψος του χωρίς να επηρεάζει το πλάτος της βάσης.

Λειτουργεί αυτή η τεχνική σε όλους τους browsers;

Ναι — το τέχνασμα τριγώνου βασισμένο σε border βασίζεται μόνο σε βασική υποστήριξη border-width, border-style και border-color, η οποία υπάρχει από τις πρώτες υλοποιήσεις CSS. Είναι μία από τις πιο ευρέως συμβατές τεχνικές σχημάτων καθαρού CSS.

Πότε πρέπει να χρησιμοποιήσω clip-path αντί για το τέχνασμα border;

Το τέχνασμα border είναι ιδανικό ειδικά για απλά τρίγωνα, καθώς δεν χρειάζεται επιπλέον ιδιότητες και λειτουργεί παντού. Για οτιδήποτε πιο σύνθετο — πεντάγωνα, αστέρια, βέλη με εγκοπή, ή διαγώνιες κοπές σε ένα κουτί που πρέπει ακόμα να δείχνει εικόνα φόντου — το clip-path είναι πιο ευέλικτο και πιο εύκολο να κατανοηθεί, αν και έχει πιο περιορισμένη υποστήριξη σε παλαιότερους browsers.

Μπορώ να βάλω κείμενο ή εικονίδιο μέσα στο τρίγωνο;

Όχι απευθείας — καθώς το στοιχείο του τριγώνου έχει μηδενικό πλάτος και ύψος, δεν υπάρχει content box για να χωρέσει τίποτα. Για να συνδυάσετε ένα τρίγωνο με κείμενο ή εικονίδιο, χρησιμοποιήστε το ως διακοσμητικό pseudo-element (::before/::after) σε ένα γονικό στοιχείο που το τοποθετεί απόλυτα, και στυλάρετε το πραγματικό περιεχόμενο του γονικού ξεχωριστά.