Πώς να δημιουργήσετε κεκλιμένες άκρες με το CSS
Σε αυτήν την ανάρτηση, θα δούμε πώς μπορούμε να δημιουργήσουμε ένα εφέ γωνίας (οριζόντια) σε μια ιστοσελίδα. Βασικά, φαίνεται κάτι τέτοιο:
Έχοντας ένα ελαφρώς γωνιακό άκρο θα πρέπει να κάνει το web layout μας να φαίνεται λιγότερο άκαμπτο και θαμπό. Για να κάνουμε αυτό το κόλπο, θα χρησιμοποιήσουμε το ψευδο-στοιχεία ::πριν και ::μετά και Μετασχηματισμός CSS3.
Χρησιμοποιώντας τα στοιχεία Pseudo
Αυτή η τεχνική χρησιμοποιεί τα ψευδο-στοιχεία ::πριν και ::μετά για να γείρετε τα άκρα των στοιχείων. Σε αυτό το παράδειγμα, θα προσαρμόσουμε το κάτω άκρο.
.μπλοκ ύψος: 400px; πλάτος: 100%. θέση: σχετική. υπόβαθρο: γραμμική κλίση (δεξιά, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%). .block :: μετά από περιεχόμενο: "· πλάτος: 100% · ύψος: 100% · θέση: απόλυτο · φόντο: inherit · z-δείκτης: -1 · κάτω: 0 · μετασχηματισμός: (3deg) ·
Ας ανακεφαλαιώσουμε.
ο μετασχηματισμού-προέλευσης καθορίζει τις συντεταγμένες του στοιχείου που θέλουμε να μετατρέψουμε. Στο παραπάνω παράδειγμα διευκρινίσαμε κάτω αριστερά που θα θέσει τις συντεταγμένες εκκίνησης στην κάτω-αριστερή πλευρά του μπλοκ.
ο μετασχηματισμός: skewY (3deg); κάνει το ::μετά μπλοκάρισμα ή γωνία 3 μοίρες. Δεδομένου ότι καθορίσαμε τη συντεταγμένη εκκίνησης ως κάτω-αριστερά, η κάτω δεξιά πλευρά του μπλοκ αυξάνει κατά 3 μοίρες. Αν ανταλλάξουμε το μετασχηματισμού-προέλευσης προς το κάτω δεξιά και η κάτω αριστερή γωνία θα ανυψωθεί κατά 3 μοίρες.
Μπορείτε να προσθέσετε ένα συμπαγές χρώμα ή κλίση για να δείτε το αποτέλεσμα.
Κάντε το πιο εύκολο με το Sass Mixin
Για να γίνει αυτό πιο εύκολο, έχω δημιουργήσει ένα Sass mixin για να προσθέσω τα γωνιακά άκρα, μείον τους πονοκεφάλους από το να ασχολούνται με την πολυπλοκότητα των κανόνων στυλ. Με το ακόλουθο mixin μπορείτε να ορίσετε γρήγορα την πλευρά - επάνω αριστερά, πάνω δεξιά, κάτω αριστερά ή κάτω δεξιά - για να παραγκωνιστούν.
@mixin γωνία-άκρη ($ pos-top: null, $ γωνία κορυφή: null, $ pos-btm: null, $ angle-btm: null) πλάτος: 100%; θέση: σχετική. υπόβαθρο: γραμμική κλίση (δεξιά, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%). & :: πριν, & :: μετά από περιεχόμενο: "· πλάτος: 100% · ύψος: 100% · θέση: απόλυτο · φόντο: inherit · z-index: -1 · μετάβαση: pos-top & :: πριν από @if $ pos-top == 'topleft' αρχή: 0; μετασχηματισμός-αρχή: δεξιά επάνω · μετασχηματισμός: skewY (γωνία κορυφής) = 'topright' κορυφή: 0 · μετασχηματισμός-προέλευση: αριστερή κορυφή · μετασχηματισμός: skewY (- γωνία κορυφής) · @if $ pos-btm & :: μετά @if $ pos-btm == 'bottomleft' κάτω: 0 · μετασχηματισμός-προέλευση: δεξιά κάτω · μετασχηματισμός: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' κάτω: 0? μετασχηματισμός: skewY ($ angle-btm)
Υπάρχουν τέσσερις μεταβλητές στο mixin. Οι δύο πρώτες μεταβλητές, $ pos-top και $ angle-top, καθορίστε το Κορυφαία αρχή συντονισμού και το βαθμός. Οι τελευταίες δύο μεταβλητές προσδιορίζουν το συντεταγμένη και το βαθμός για το κάτω μέρος πλευρά.
Εάν γεμίσετε και τις τέσσερις μεταβλητές, μπορείτε να γωνιώσετε και τις δύο πλευρές - πάνω και κάτω - του στοιχείου.
Χρησιμοποιήστε το Sass @περιλαμβάνω σύνταξη για να εισαγάγετε το mixin σε ένα στοιχείο. Μπορείτε να δείτε παραδείγματα παρακάτω:
Για να προσθέσετε το λοξό άκρο πάνω αριστερά πλευρά:
.το μπλοκ @ περιλαμβάνει γωνία-άκρο (topleft, 3deg)?
Για να προσθέσετε το λοξό άκρο κάτω δεξιά πλευρά:
.το μπλοκ @ περιλαμβάνει την γωνία-άκρη (bottomright, 3deg)?
Για να προσθέσετε το λοξό άκρο πάνω αριστερά και κάτω δεξιά πλευρά:
.το μπλοκ @περιλαμβάνει γωνία-άκρη (topleft, 3deg, bottomright, 3deg).
Παρακάτω είναι το demo με τις εφαρμογές mixins. Αλλάξτε το πλαίσιο επιλογής για εναλλαγή σε άλλο στυλ.
Αυτό είναι!
