これは簡単でいいね!コンテンツの区切りを斜め線にするテクニック(レスポンシブ対応) -Angled Edges

縦長ページなど、コンテンツを積み重ねてレイアウトする際に、コンテンツ間の区切りを斜めにするSassのMixinを紹介します。

斜め線はSVGなので、デスクトップでもスマホでも美しく斜めに表示されます。

サイトのキャプチャ

Angled Edges
Angled Edges -GitHub

Angled Edgesのデモ

対応ブラウザはSVGをサポートするブラウザで、すべてのモダンブラウザとIE9+です。
区切りの色が濃くなっているエリアが適用した箇所です。

デモのキャプチャ

デモページ

斜め線はSVGのベクターなので、サイズを変更しても美しく表示されます。

サイトのキャプチャ

デモページ: 幅1200px, 800px, 480pxで表示

写真のコンテンツと組み合わせても斜め線は、問題ありません。

デモのキャプチャ

デモページ

Angled Edgesの使い方

「_angled-edges.scss」をインポートします。

Mixinでは、位置・斜辺・塗りのパラメータを変更できます。

それぞれのパラメータは下記の通り。

$location
親要素に対する形の位置
  • inside top
  • outside top
  • inside bottom
  • outside bottom
$hypotenuse
斜辺が置かれている直角三角形の側面
  • upper left
  • upper right
  • lower left
  • lower right
$fill
直角三角形を塗りつぶす色
$width(オプション)
直角三角形の幅(デフォルトは2800px)
$height(オプション)
直角三角形の高さ(デフォルトは100px)

パラメータを記述すると、下記のようになります。

_angled-edges.scss

「_angled-edges.scss」の中身は、こんな感じです。

top of page

©2017 coliss