Üçgenleri taklit etmek için 0 genişlik / 0 yükseklik öğesinde şeffaf kenarlıklar kullanan oldukça popüler bir CSS hacklemesi var. Burada CSS hilelerinde onu tasvir eden bir CSS parçacığı var.
Benim gibi, nasıl çalıştığını asla tam olarak hatırlamıyorsanız, bize yardım etmek için Sass'ı kullanabileceğimizden emin olun.
/// 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; ) )Ek Notlar:
* opposite-positionİşlev Compass'tan gelir; Compass kullanmıyorsanız, kendi pusulanızın olması gerekebilir;
* Mixin, üçgenin konumlandırılmasıyla ilgilenmez; bunu bir konumlandırma karışımı ile birleştirmek mükemmeldir;
* contentYönerge, aslında çoğu durumda olan sözde öğelerde kullanılmasına izin vermek içindir.
Kullanım
.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%; )