Υπάρχει ένα αρκετά δημοφιλές hack CSS που χρησιμοποιεί διαφανή περιθώρια σε ένα στοιχείο 0 πλάτους / 0 ύψους για να μιμείται τρίγωνα. Υπάρχει ένα απόσπασμα CSS εδώ στα CSS-Tricks που το απεικονίζει.
Αν, όπως εγώ, δεν θυμάστε ποτέ πώς λειτουργεί, βεβαιωθείτε ότι μπορούμε να χρησιμοποιήσουμε το Sass για να μας βοηθήσετε.
/// Triangle helper mixin /// @param (Direction) $direction - Triangle direction, either `top`, `right`, `bottom` or `left` /// @param (Color) $color (currentcolor) - Triangle color /// @param (Length) $size (1em) - Triangle size @mixin triangle($direction, $color: currentcolor, $size: 1em) ( @if not index(top right bottom left, $direction) ( @error "Direction must be either `top`, `right`, `bottom` or `left`."; ) width: 0; height: 0; content: ''; z-index: 2; border-#(opposite-position($direction)): ($size * 1.5) solid $color; $perpendicular-borders: $size solid transparent; @if $direction == top or $direction == bottom ( border-left: $perpendicular-borders; border-right: $perpendicular-borders; ) @else if $direction == right or $direction == left ( border-bottom: $perpendicular-borders; border-top: $perpendicular-borders; ) )Επιπρόσθετες σημειώσεις:
* Η opposite-positionλειτουργία προέρχεται από την πυξίδα. εάν δεν χρησιμοποιείτε το Compass, ίσως χρειαστεί να έχετε το δικό σας.
* Η μίξη δεν ασχολείται με την τοποθέτηση του τριγώνου. είναι εντάξει να το συνδυάσεις με ένα mixin τοποθέτησης.
* Η contentοδηγία έχει σκοπό να επιτρέψει τη χρήση της σε ψευδο-στοιχεία, πράγμα που στην πραγματικότητα καταλήγει στις περισσότερες περιπτώσεις.
Χρήση
.foo::before ( @include triangle(bottom); position: absolute; left: 50%; bottom: 100%; ).foo::before ( width: 0; height: 0; content: ''; z-index: 2; border-top: 1.5em solid currentColor; border-left: 1em solid transparent; border-right: 1em solid transparent; position: absolute; left: 50%; bottom: 100%; )