and More

斜めのセクションエッジをすばやく作成するAngled Edges

May 3, 2017
Angled Edges

Angled EdgesはSVGをエンコードすることにより、セクション上に斜めのエッジを作成するためのSassミックスイン。

Browser Support

  1. IE 9+
  2. Edge
  3. Firefox
  4. Chrome
  5. Safari
  6. Opera
  7. iOS Safari
  8. Opera Mini
  9. Android Browser
  10. Chrome for Android

Usage

インポート

@import "angled-edges";

ミックスインには位置、斜辺、塗りつぶしの3つの必須パラメーター

@include angled-edge($location, $hypotenuse, $fill);

$location親要素に対する形状の位置

  1. inside top
  2. outside top
  3. inside bottom
  4. outside bottom

$hypotenuse斜辺が置かれている直角三角形の側面

  1. upper left
  2. upper right
  3. lower left
  4. lower right

$fill三角形の色を塗りつぶす

$heightオプション – 三角形の高さ – 高さに相当する整数を受け入れるpx

$widthオプション – 三角形の幅 – 単位幅の整数に相当する整数を受け入れますpx

1.xからのアップグレード

@include angled-edge('outside bottom', 'lower right', 150);

MIT