• 二等辺三角形を生成するコードを返す。
• 実用では、要素ではなく擬似要素（:before :after）に指定して使用するケースが多いと想定される。

@mixin pe-triangle($size, $color, $direction) {
  ...
}

<span class="pepagis-ex-triangle-up"></span>
<span class="pepagis-ex-triangle-right"></span>
<span class="pepagis-ex-triangle-down"></span>
<span class="pepagis-ex-triangle-left"></span>

<span class="pepagis-ex-triangle-up-left"></span>
<span class="pepagis-ex-triangle-up-right"></span>
<span class="pepagis-ex-triangle-down-left"></span>
<span class="pepagis-ex-triangle-down-right"></span>

<span class="pepagis-ex-triangle-up-arg"></span>
<span class="pepagis-ex-triangle-right-arg"></span>
<span class="pepagis-ex-triangle-down-arg"></span>
<span class="pepagis-ex-triangle-left-arg"></span>

.pepagis-ex-triangle-up {
  @include triangle(10px, #0c9dc2, up);
}
.pepagis-ex-triangle-right {
  @include triangle(10px, #0c9dc2, right);
}
.pepagis-ex-triangle-down {
  @include triangle(10px, #0c9dc2, down);
}
.pepagis-ex-triangle-left {
  @include triangle(10px, #0c9dc2, left);
}
.pepagis-ex-triangle-up-left {
  @include triangle(10px, #ec387b, up-left);
}
.pepagis-ex-triangle-up-right {
  @include triangle(10px, #ec387b, up-right);
}
.pepagis-ex-triangle-down-left {
  @include triangle(10px, #ec387b, down-left);
}
.pepagis-ex-triangle-down-right {
  @include triangle(10px, #ec387b, down-right);
}
// $size に高さ、$color に背景色を指定
.pepagis-ex-triangle-up-arg {
  @include triangle(12px 10px, #899e00 #e6ebca, up);
}
.pepagis-ex-triangle-right-arg {
  @include triangle(12px 10px, #899e00 #e6ebca, right);
}
.pepagis-ex-triangle-down-arg {
  @include triangle(12px 10px, #899e00 #e6ebca, down);
}
.pepagis-ex-triangle-left-arg {
  @include triangle(12px 10px, #899e00 #e6ebca, left);
}

.pepagis-ex-triangle-up {
  display: inline-block;
  height: 0;
  width: 0;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #0c9dc2;
  border-left: 5px solid transparent;
}
.pepagis-ex-triangle-right {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #0c9dc2;
}
.pepagis-ex-triangle-down {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 5px solid #0c9dc2;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.pepagis-ex-triangle-left {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid #0c9dc2;
  border-bottom: 5px solid transparent;
}
.pepagis-ex-triangle-up-left {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 10px solid #ec387b;
  border-right: 10px solid transparent;
}
.pepagis-ex-triangle-up-right {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 10px solid #ec387b;
  border-left: 10px solid transparent;
}
.pepagis-ex-triangle-down-left {
  display: inline-block;
  height: 0;
  width: 0;
  border-bottom: 10px solid #ec387b;
  border-right: 10px solid transparent;
}
.pepagis-ex-triangle-down-right {
  display: inline-block;
  height: 0;
  width: 0;
  border-bottom: 10px solid #ec387b;
  border-left: 10px solid transparent;
}
.pepagis-ex-triangle-up-arg {
  display: inline-block;
  height: 0;
  width: 0;
  border-right: 6px solid #e6ebca;
  border-bottom: 10px solid #899e00;
  border-left: 6px solid #e6ebca;
}
.pepagis-ex-triangle-right-arg {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 6px solid #e6ebca;
  border-bottom: 6px solid #e6ebca;
  border-left: 10px solid #899e00;
}
.pepagis-ex-triangle-down-arg {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 10px solid #899e00;
  border-right: 6px solid #e6ebca;
  border-left: 6px solid #e6ebca;
}
.pepagis-ex-triangle-left-arg {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 6px solid #e6ebca;
  border-right: 10px solid #899e00;
  border-bottom: 6px solid #e6ebca;
}

pe-triangle() の使用例

擬似要素 :before に指定する場合。

表示サンプル

<span class="pepagis-ex-triangle-up2"></span>

使用例

.pepagis-ex-triangle-up2:before {
  content: "";
  @include triangle(10px, #0c9dc2, up);
}

コンパイル結果

.pepagis-ex-triangle-up2:before {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #0c9dc2;
  border-left: 5px solid transparent;
}