Πώς CSS τρίγωνο: οι πιο εύχρηστους τρόπους

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

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

Εφαρμογή στο σχεδιασμό των χώρων

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

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

Μία μέθοδος δημιουργίας πλαίσιο χρησιμοποιώντας

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

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

Δημιουργήστε γωνίες, χρησιμοποιώντας τις ιδιότητες «καρέ» είναι βολικό, επειδή δεν υπάρχει καμία ανάγκη να ζωγραφίσουν χρησιμοποιώντας οποιαδήποτε επεξεργασία. παραμέτρους τρίγωνο μπορεί πάντα να αλλάξει στον κώδικα. Και εξοικονομεί προγραμματιστής χρόνο. Με το συνδυασμό της διαφορετικό πλάτος του πλαισίου είναι αρκετά εύκολο να πάρει το σχήμα. Για να καταλάβετε πώς λειτουργεί, μπορείτε απλά να δημιουργήσετε ένα κενό στοιχείο με μηδενικό πλάτος, ύψος, και πολύ χοντρό σκελετό ένα διαφορετικό χρώμα σε κάθε πλευρά. Έτσι, κάνοντας τις τρεις πλευρές από τις τέσσερις διαφανείς τρίγωνα είναι διαφορετικών τύπων:

• τρίγωνο, κοιτάζοντας προς τα αριστερά, του οποίου οι πλευρές είναι ίσες?
• τρίγωνο, ψάχνει αριστερά και ισοπέδωσε?
• ένα επίμηκες τρίγωνο, προς τα αριστερά?
• ορθογώνιο τρίγωνο, του οποίου τα αριστερά προς τα δεξιά γωνία?
• τρίγωνο κοιτάζοντας προς τα κάτω?
• τρίγωνο κοιτώντας ψηλά?
• τρίγωνο, κοιτάζοντας προς τα δεξιά, και πολλά άλλα είδη.

χρησιμοποιώντας psevdoedementov

Με αυτές τις τεχνικές, μπορείτε να δημιουργήσετε γωνίες στο pop-up οδηγίες και συμβουλές. Για να συνδέσετε μέσω CSS τρίγωνο στη μονάδα, ως επί το πλείστον προγραμματιστές χρησιμοποιούν όπως ένα ψευδο-μετά και πριν. Αν τα χρησιμοποιήσετε μαζί, είναι δυνατό να εξαχθούν στο τρίγωνο CSS έχει ένα εγκεφαλικό επεισόδιο.

Με το συνδυασμό τους, οι προγραμματιστές να δημιουργήσουν μια ποικιλία από όμορφα shooter, εφαρμόζοντας το ακίνητο θέση: σε σχέση με το γονικό στοιχείο. Αυτό γίνεται για να ψευδο-δεν μετακινηθεί από τις θέσεις τους.

Πλέον η χρήση του πλαισίου CSS για τη δημιουργία τριγώνων είναι:

• γρήγορη και εύκολη επεξεργασία των μεγεθών και χρωμάτων με τη βοήθεια του ιδιότητες?
• υποστήριξη όλων των browsers.

μειονεκτήματα:

• επειδή χρησιμοποιεί το πλαίσιο, δεν υπάρχει δυνατότητα να εφαρμόσει διαβαθμίσεις, σκιές?
• Μερικές φορές, όταν ο χρήστης κοιτάζει σελίδα του browser Firefox, η τιμή άλφα μπορεί να μην λειτουργεί, και αυτό θα στρεβλώσει την εικόνα.

Χρησιμοποιώντας έτοιμες εικόνες

Η ακόλουθη μέθοδος για τη δημιουργία τριγώνων - είναι η χρήση των κωδικοποιημένων εικόνων. Το τρίγωνο που εκ των προτέρων σε ένα πρόγραμμα επεξεργασίας εικόνας και μετατράπηκε σε ειδικό κωδικό με εξειδικευμένες υπηρεσίες.

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

Ένα ξεχωριστό στοιχείο που αξίζει η χρήση των browsers Internert Explorer παλιές εκδόσεις. Σε αυτά, η μέθοδος απλά δεν λειτουργεί.

Μέθοδος ανεστραμμένη πλατεία

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

Κατ 'αρχάς, μπορείτε να δημιουργήσετε ένα τετράγωνο. Θα είναι τα περιεχόμενα του περιστρεφόμενου μέλους. Στη συνέχεια, αναπτύσσουν κατά 45 μοίρες, έτσι ώστε φαινόταν σαν ένα διαμάντι. Στη συνέχεια, η μετατόπιση-up και μια εξωτερική μονάδα είναι κρυμμένο από την υπερχείλιση ακινήτου: κρυμμένο. Η λύση αυτή δεν είναι επίσης ένα cross-browser, και μερικές φορές η εικόνα δεν εμφανίζεται όπως είναι επιθυμητό.

αποτελέσματα

Έτσι, υπάρχουν πολλές μέθοδοι για να δημιουργήσετε ένα τρίγωνο. Μόνο που δεν χάνονται σε όλες αυτές τις ιδιότητες CSS; Αναφορά σε αυτή την περίπτωση θα σας βοηθήσει πάντα. Περιγράφει όλα τα χαρακτηριστικά της επικαλυπτόμενα φύλλα στυλ.

Για όσους δεν θέλουν να πάνε στον προγραμματισμό και να δείτε το CSS-οδηγό, υπάρχουν σε απευθείας σύνδεση εκδότες που δημιουργούν τρίγωνα σωστά μεγέθη και χρώματα. Στο οπτικό επεξεργαστή, ο χρήστης επιλέγει και διαμορφώνει όλες τις ρυθμίσεις σχήμα. Μετατροπή στη γεννήτρια κώδικα CSS τρίγωνο τοποθετείται σε ξεχωριστό παράθυρο on the fly. Στη συνέχεια, ο παραγόμενος κώδικας είναι απλά εισάγεται στο φύλλο στυλ και να ταιριάζει με το σχεδιασμό της σελίδας.