_triangle

三角形を描画します。

引数	型	初期値	説明
`@include _triangle($direction, $width, $height, $color, $method, $responsive);`
`$direction`	String		三角形の向き
			`top`	上
			`left`	左
			`right`	右
			`bottom`	下
			`top-left`	左上
			`top-right`	右上
			`bottom-left`	左下
			`bottom-right`	右下
`$width`	Number	`null`	横幅
`$height`	Number	`null`	縦幅
`$color`	Color	`currentColor`	色
`$method`	String	`border`	手法
			`border`	`border` プロパティを使った手法
			`gradient`	`linear-gradient()` を使った手法
`$responsive`	Boolean	`false`	レスポンシブに対応するか

三角形

簡単に三角形を描画できます。

<div class="element"></div>

.element {
  @include _triangle(top, 200px, 100px, #3db57c);
}

レスポンシブ対応

三角形を横幅に応じて可変（レスポンシブ化）させたい場合は、$method 引数に gradient、$responsive 引数に true を指定します。

<div class="container">
  <div class="element"></div>
</div>

.container {
  @include _aspect-ratio(3, 2, '> .element');
}
.element {
  @include _triangle(top, $color: #3db57c, $method: gradient, $responsive: true);
}

$width と $height 引数は指定する必要がありません。あとは _aspect-ratio 関数を使って3:2の要素を作成します。