Mixin SASS inspiré de ce générateur en ligne : CSS triangle generator. Simulation sur http://jsfiddle.net/j1qjrauv/7/.
Note : Un mixin beaucoup plus costaud pour faire la même chose : CSS Tricks – CSS Triangle Mixin, A Sass Mixin for CSS Triangles.
|
1 2 3 |
.arrow { @include arrow(top,20px,20px,tomato); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
@mixin arrow( $arrow-direction: top, $arrow-width: 20px, $arrow-height: 20px, $arrow-color: #007bff) { position: absolute; width: 0; height: 0; border-style: solid; -webkit-transform:rotate(360deg); /* for a better anti-aliasing in webkit browser */ /* border-style: inset */ /* Try if Firefox renders a strange gray border */ @if $arrow-direction == top { border-width: 0 $arrow-width / 2 $arrow-height $arrow-width / 2; border-color: transparent transparent $arrow-color transparent; } @if $arrow-direction == top-right { border-width: 0 $arrow-width $arrow-height 0; border-color: transparent $arrow-color transparent transparent; } @if $arrow-direction == right { border-width: $arrow-height / 2 0 $arrow-height / 2 $arrow-width; border-color: transparent transparent transparent $arrow-color; } @if $arrow-direction == bottom-right { border-width: 0 0 $arrow-height $arrow-width; border-color: transparent transparent $arrow-color transparent; } @if $arrow-direction == bottom { border-width: $arrow-height $arrow-width / 2 0 $arrow-width / 2; border-color: $arrow-color transparent transparent transparent; } @if $arrow-direction == bottom-left { border-width: $arrow-height 0 0 $arrow-width; border-color: transparent transparent transparent $arrow-color; } @if $arrow-direction == left { border-width: $arrow-height / 2 $arrow-width $arrow-height / 2 0; border-color: transparent $arrow-color transparent transparent; } @if $arrow-direction == top-left { border-width: $arrow-height $arrow-width 0 0; border-color: $arrow-color transparent transparent transparent; } } |