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

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

Σχεδίαση βασικών σχημάτων CSS

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

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

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

HTML

CSS 

.rec-sq {
οθόνη: flex;
κενό: 2em;
περιθώριο: 2em;
}
.τετράγωνο {
πλάτος: 15 εκ.
ύψος: 15 εκ.
φόντο: rgb (255, 123, 0);
}
.ορθογώνιο {
πλάτος: 24 εκ.
ύψος: 14 εκ.
φόντο: rgb (0, 119, 128);
}
instagram viewer

Παραγωγή:

Κύκλος και Έλειψη

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

HTML

CSS 

.κύκλος {
πλάτος: 15 εκ.
ύψος: 15 εκ.
φόντο: rgb (255, 123, 0);
ακτίνα συνόρων: 50%;
}
.έλλειψη {
πλάτος: 24 εκ.
ύψος: 14 εκ.
φόντο: rgb (0, 119, 128);
ακτίνα συνόρων: 50%;
}

Παραγωγή:

Τρίγωνα

Θα χρησιμοποιήσουμε περιγράμματα για να δημιουργήσουμε τρίγωνα. Αναρωτιέστε πώς λειτουργεί; Το μόνο που χρειάζεται να κάνετε είναι να ρυθμίσετε το πλάτος και ύψος του τριγώνου στο μηδέν. Σημαίνει, προχωρώντας, το πραγματικό πλάτος του στοιχείου θα είναι το πλάτος του περιγράμματος. Επίσης, μπορεί να γνωρίζετε ήδη ότι οι άκρες του περιγράμματος έχουν διαγώνιο 45 μοιρών μεταξύ τους. Δώστε διαφορετικά χρώματα σε κάθε περίγραμμα και ορίστε οποιαδήποτε τρία από αυτά σε διαφανή. Τελικά, θα έχετε το τρίγωνό σας.

HTML





CSS 

//κοινό για όλους
σώμα {
οθόνη: flex;
κενό: 5em;
περιθώριο: 15 εκ.
}.δείγμα {
Ύψος: 8,5 εκ.
πλάτος: 8,5em;
περίγραμμα κορυφής: 1em στερεό #9ee780;
περίγραμμα-δεξιά: 1em συμπαγές rgb (240, 241, 141);
περίγραμμα-κάτω: 1em συμπαγές rgb (145, 236, 252);
περίγραμμα-αριστερά: 1em συμπαγές rgb (248, 115, 106);
}.τρίγωνο {
ύψος: 0;
πλάτος: 0;
περίγραμμα κορυφής: 5em στερεό #9ee780;
περίγραμμα δεξιά: 5em συμπαγές rgb (240, 241, 141);
περίγραμμα-κάτω: 5em συμπαγές rgb (145, 236, 252);
περίγραμμα-αριστερά: 5em συμπαγές rgb (248, 115, 106);
}

Παραγωγή:

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

HTML






CSS 

.triangle-up {
ύψος: 0;
πλάτος: 0;
περίγραμμα κορυφής: 5em συμπαγές διαφανές.
περίγραμμα-δεξιά: 5em συμπαγές διαφανές.
περίγραμμα-κάτω: 5em συμπαγές rgb (145, 236, 252);
περίγραμμα-αριστερά: 5em συμπαγές διαφανές.
}
.triangle-right {
πλάτος: 0;
ύψος: 0;
στιλ περιγράμματος: συμπαγές;
πλάτος περιγράμματος: 4em 0 4em 8em;
χρώμα περιγράμματος: διαφανές διαφανές διαφανές rgb (245, 149, 221);
}
.triangle-bottom-right {
πλάτος: 0;
ύψος: 0;
στιλ περιγράμματος: συμπαγές;
πλάτος περιγράμματος: 8em 0 0 8em;
χρώμα περιγράμματος: διαφανές διαφανές διαφανές rgb (151, 235, 158);
}

Παραγωγή:

Δημιουργία προηγμένων σχημάτων με χρήση CSS

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

Σχήμα αστεριού (5-πόντους)

Θα χρειαστεί να χειριστείτε τα περιγράμματα χρησιμοποιώντας την τιμή περιστροφής του μετασχηματισμού. Η ιδέα είναι να δημιουργήσετε δύο πλευρές χρησιμοποιώντας α class=”αστέρι”, οι άλλες δύο πλευρές χρησιμοποιούν το ::μετά στοιχείο και η τελευταία πλευρά χρησιμοποιώντας το ::πριν στοιχείο.

HTML


CSS 

.star-five {
περιθώριο: 3,125em 0;
θέση: σχετική;
οθόνη: μπλοκ;
πλάτος: 0em;
ύψος: 0em;
περίγραμμα-δεξιά: 6,25em στερεό διαφανές.
περίγραμμα-κάτω: 4,3em στερεά rgb (255, 174, 81);
περίγραμμα-αριστερά: 6,25em συμπαγές διαφανές.
μετασχηματισμός: περιστροφή (35 μοίρες).
}
.star-five: πριν από {
περίγραμμα-κάτω: 5em συμπαγές rgb (255, 174, 81);
περίγραμμα-αριστερά: 2em συμπαγές διαφανές.
περίγραμμα-δεξιά: 1.875em στερεό διαφανές.
θέση: απόλυτη;
ύψος: 0;
πλάτος: 0;
κορυφή: -45px;
αριστερά: -65px;
οθόνη: μπλοκ;
περιεχόμενο: '';
μετασχηματισμός: περιστροφή (-35 μοίρες);
}
.star-five: μετά από {
θέση: απόλυτη;
οθόνη: μπλοκ;
κορυφή: 3px;
αριστερά: -105px;
πλάτος: 0;
ύψος: 0;
περίγραμμα-δεξιά: 6,25em στερεό διαφανές.
περίγραμμα-κάτω: 4,3em στερεά rgb (255, 174, 81);
περίγραμμα-αριστερά: 5,95em στερεό διαφανές.
μετασχηματισμός: περιστροφή (-70 μοίρες);
περιεχόμενο: '';
}

Παραγωγή:

Πεντάγωνο

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

HTML


CSS 

.πεντάγωνο {
θέση: σχετική;
πλάτος: 10em;
box-sizing: content-box;
πλάτος περιγράμματος: 10em 5em 0;
στιλ περιγράμματος: συμπαγές;
χρώμα περιγράμματος: rgb (7, 185, 255) διαφανές.
margin-top: 20rem;
περιθώριο-αριστερά: 10rem;
}
.πεντάγωνο: πριν από {
περιεχόμενο: "";
θέση: απόλυτη;
ύψος: 0;
πλάτος: 0;
κορυφή: -18em;
αριστερά: -5em;
πλάτος περιγράμματος: 0 10em 8em;
στιλ περιγράμματος: συμπαγές;
χρώμα περιγράμματος: διαφανές διαφανές rgb (7, 185, 255);
}

Παραγωγή:

Διαμάντι

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

HTML


CSS 

.διαμάντι {
πλάτος: 0;
ύψος: 0;
θέση: σχετική;
κορυφή: -3em;
περίγραμμα: 3em συμπαγές διαφανές.
περίγραμμα-κάτω-χρώμα: rgb (129, 230, 255);
}
.διαμάντι: μετά από {
περιεχόμενο: '';
πλάτος: 0;
ύψος: 0;
θέση: απόλυτη;
αριστερά: -3em;
κορυφή: 3em;
περίγραμμα: 3em συμπαγές διαφανές.
χρώμα περιγράμματος κορυφής: rgb (129, 230, 255);
}

Παραγωγή:

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

HTML


CSS 

.διαμάντι-ασπίδα
{
πλάτος: 0;
ύψος: 0;
περίγραμμα: 3em συμπαγές διαφανές.
περίγραμμα-κάτω: 1,25em συμπαγές rgb (71, 194, 231);
θέση: σχετική;
κορυφή: -3em;
}
.diamond-cut: after {
περιεχόμενο: '';
θέση: απόλυτη;
αριστερά: -3em;
κορυφή: 1,25 εκ.
πλάτος: 0;
ύψος: 0;
περίγραμμα: 3em συμπαγές διαφανές.
border-top: 4,4em στερεά rgb (71, 194, 231);
}

Παραγωγή:

Καρδιά

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

HTML


CSS 

.καρδιά {
πλάτος: 6,25em;
Ύψος: 55 εκ.
θέση: σχετική;
}
.καρδιά: πριν,
.καρδιά: μετά από {
περιεχόμενο: "";
πλάτος: 3em;
ύψος: 5em;
θέση: απόλυτη;
αριστερά: 3em;
κορυφή: 0;
φόντο: κόκκινο;
ακτίνα συνόρων: 3em 3em 0 0;
μετασχηματισμός: περιστροφή (-45 μοίρες);
μετασχηματισμός-προέλευση: 0 100%;
}
.καρδιά: μετά από {
αριστερά: 0;
μετασχηματισμός: περιστροφή (45 μοίρες);
μετασχηματισμός-προέλευση: 100% 100%;
}

Παραγωγή:

Πειραματιστείτε με καθαρά σχήματα CSS

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

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

Κλήση όλων των αρχαρίων προγραμματιστών ιστού: αυτό το σεμινάριο θα σας δώσει τις δεξιότητες που χρειάζεστε για να δημιουργήσετε τις δικές σας ανταποκρίσιμες γραμμές πλοήγησης χρησιμοποιώντας μόνο HTML και CSS!

Διαβάστε Επόμενο

ΜερίδιοΤιτίβισμαΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
Σχετικά θέματα
  • Προγραμματισμός
  • CSS
  • Web Design
  • Ανάπτυξη διαδικτύου
Σχετικά με τον Συγγραφέα
Naincy Mourya (Δημοσιεύτηκαν 14 άρθρα)

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

Περισσότερα από τη Naincy Mourya

Εγγραφείτε στο ενημερωτικό μας δελτίο

Εγγραφείτε στο ενημερωτικό μας δελτίο για συμβουλές τεχνολογίας, κριτικές, δωρεάν ebook και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για να εγγραφείτε