JSFiddle - React, Tailwind, and code Playground

by oilvier

SCSS

/* -------------------------------------------------------------------------- *\


	 # Arrows 


\* -------------------------------------------------------------------------- */

/* ==========================================================================
   Dessine une fleche
   ========================================================================== */
@mixin arrow-simple($size, $color, $direction:bottom){
	$side:top;
	@if $direction == left {
		  $side:right;
		} @else if $direction == right {
		  $side:left;
		} @else if $direction == top {
		  $side:bottom;
		} 

	&:after {content:""; position:absolute; width:0; height:0; border:$size solid transparent; border-#{$side}:$size solid $color;}
}

/* ==========================================================================
   Pour faire un pavé avec une fleche accollée sur un bord
   ========================================================================== */
// $position-origin : prend les valeurs left ou right   
@mixin arrow-for-box($size, $color, $direction:bottom, $position: 50%, $position-origin:left) {

	@include arrow-simple($size, $color, $direction);
  
  	&:after {#{$position-origin}:$position; #{$direction}:-$size*2; margin-#{$position-origin}:-$size;}
}