<button>
  Button
  <span id="triangle"></span> 
</button>

 

// Triangle mixin
//
// @param {Direction} $direction - Orientation du triangle `up`, `right`, `down` ou `left`
// @param {Color} $color [currentcolor] - Couleur du triangle 
// @param {Size} $size [0.5rem] - Taille du triangle
// @param {Position} $position [relative] - Position du triangle
@mixin triangle($direction, $color: currentcolor, $size: 0.5rem, $position: relative){
    position: $position;
    display: inline-block;    
    width: 0;
    height: 0;
    border: $size solid transparent;
    
    @if $direction == down {  
        border-top-color: $color;
        border-bottom-width: 0;    
    } @else if $direction == up {
        border-bottom-color: $color;
        border-top-width: 0; 
    } @else if $direction == right {
        border-left-color: $color;
        border-right-width: 0;
    } @else if  $direction == left {
        border-right-color: $color;
        border-left-width: 0;
    }
}

/* MIXIN DEMO */

#triangle {
  @include triangle(down);
}

/* DECORATION */
button{
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ddd;
}
button:hover {
  background-color: #3ea1c0;
  color: #fff;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.