mixin for css flag https://codepen.io/zdoug/pen/mOVdZN?page=1&

flag.scss

@mixin flag-variant($height, $bg) {
  display: block;
  background:$bg;
  position: relative;
  line-height: $height;
  font-size: $height*.5;

  &::before,
  &::after {
      content: "";
      position: absolute;
      left: 100%;
      width: 0;
      height: 0;
      border-style: solid;
      display: block;
  }
  &::before {
      top: 0;
      border-width: $height*.6 $height*.5 $height*.2 0;
      border-color: $bg transparent transparent transparent;
  }
  &::after {
      bottom: 0;
      border-width: $height*.2 $height*.5 $height*.6 0;
      border-color: transparent transparent $bg transparent;
  }
}