_triangle

三角形を描画します。

引数初期値説明
@include _triangle($direction, $width, $height, $color, $method, $responsive);
$directionString三角形の向き
top
left
right
bottom
top-left左上
top-right右上
bottom-left左下
bottom-right右下
$widthNumbernull横幅
$heightNumbernull縦幅
$colorColorcurrentColor
$methodStringborder手法
borderborder プロパティを使った手法
gradientlinear-gradient() を使った手法
$responsiveBooleanfalseレスポンシブに対応するか

三角形

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

<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の要素を作成します。