HTML
Μπορείτε να τα φτιάξετε με ένα μόνο div. Είναι ωραίο να έχουμε μαθήματα για κάθε δυνατότητα κατεύθυνσης.
CSS
Η ιδέα είναι ένα κουτί με μηδενικό πλάτος και ύψος. Το πραγματικό πλάτος και ύψος του βέλους καθορίζεται από το πλάτος του περιγράμματος. Σε ένα επάνω βέλος, για παράδειγμα, το κάτω περίγραμμα είναι χρωματισμένο ενώ το αριστερό και το δεξί είναι διαφανές, το οποίο σχηματίζει το τρίγωνο.
.arrow-up ( width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; ) .arrow-down ( width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; ) .arrow-right ( width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; ) .arrow-left ( width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; )Διαδήλωση
Δείτε το Pen Animation για να εξηγήσετε CSS Triangles από τον Chris Coyier (@chriscoyier) στο CodePen.
Παραδείγματα
Ο Dave Everitt γράφει:
Για ένα ισόπλευρο τρίγωνο, αξίζει να επισημανθεί ότι το ύψος είναι 86,6% του πλάτους, έτσι (περίγραμμα-αριστερά-πλάτος + περίγραμμα-δεξιά-πλάτος) * 0,886% = περίγραμμα-κάτω-πλάτος