Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

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

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框为透明，控制三角形的左斜边 */
    border-right: 50px solid transparent; /* 右边框为透明，控制三角形的右斜边 */
    border-bottom: 100px solid #f00; /* 底边框为实色，控制三角形的底边 */
}

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

Μπορείτε να εφαρμόσετε τον παραπάνω κώδικα σε ένα στοιχείο HTML, για παράδειγμα:

 <div class="triangle"></div>

Αυτό θα εμφανίσει ένα τρίγωνο στη σελίδα.