これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges
Post on:2016年12月12日
sponsors
縦長ページなど、コンテンツを積み重ねてレイアウトする際に、コンテンツ間の区切りを斜めにするSassのMixinを紹介します。
斜め線はSVGなので、デスクトップでもスマホでも美しく斜めに表示されます。
Angled Edges
Angled Edges -GitHub
Angled Edgesのデモ
対応ブラウザはSVGをサポートするブラウザで、すべてのモダンブラウザとIE9+です。
区切りの色が濃くなっているエリアが適用した箇所です。
斜め線はSVGのベクターなので、サイズを変更しても美しく表示されます。
デモページ: 幅1200px, 800px, 480pxで表示
写真のコンテンツと組み合わせても斜め線は、問題ありません。
Angled Edgesの使い方
「_angled-edges.scss」をインポートします。
|
1 |
@import "angled-edges"; |
Mixinでは、位置・斜辺・塗りのパラメータを変更できます。
|
1 |
@include angled-edge($location, $hypotenuse, $fill, $width: 2800, $height: 100); |
それぞれのパラメータは下記の通り。
- $location
- 親要素に対する形の位置
-
- inside top
- outside top
- inside bottom
- outside bottom
- $hypotenuse
- 斜辺が置かれている直角三角形の側面
-
- upper left
- upper right
- lower left
- lower right
- $fill
- 直角三角形を塗りつぶす色
- $width（オプション）
- 直角三角形の幅（デフォルトは2800px）
- $height（オプション）
- 直角三角形の高さ（デフォルトは100px）
パラメータを記述すると、下記のようになります。
|
1 |
@include angled-edge('outside bottom','lower right', #EE3924); |
_angled-edges.scss
「_angled-edges.scss」の中身は、こんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
//------------------------------------------------------------------------------------- // Angled Edges v1.1.2 (https://github.com/josephfusco/angled-edges) // Copyright 2016 Joseph Fusco // Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE) //------------------------------------------------------------------------------------- /// Replace `$search` with `$replace` in `$string` /// /// @author Hugo Giraudel /// @link http://www.sassmeister.com/gist/1b4f2da5527830088e4d /// /// @param {String} $string - Initial string /// @param {String} $search - Substring to replace /// @param {String} $replace ('') - New value /// @return {String} Updated string /// @function ae-str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } @return $string; } /// Encode SVG to use as background /// /// @param {String} $string /// @return {String} Encoded svg data /// @function ae-svg-encode($string){ $result: ae-str-replace($string, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"'); $result: ae-str-replace($result, '%', '%25'); $result: ae-str-replace($result, '"', '\''); $result: ae-str-replace($result, '<', '%3C'); $result: ae-str-replace($result, '>', '%3E'); @return 'data:image/svg+xml,' + $result; } /// Outputs pseudo content for main mixin /// /// @author Joseph Fusco /// /// @param {String} $location /// @param {Number} $height /// @output psuedo content /// @mixin ae-pseudo($wedge, $height) { background-image: url($wedge); background-position: center center; background-repeat: no-repeat; content: ''; height: $height * 1px; left: 0; position: absolute; right: 0; width: 100%; z-index: 1; } /// Attatches an svg wedge shape to an element /// /// @author Joseph Fusco /// /// @param {String} $location - 'inside top', 'outside top', 'inside bottom', 'outside bottom' /// @param {String} $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right' /// @param {Color} $fill /// @param {Number} $width /// @param {Number} $height /// @output '::before' and/or '::after' with svg background image /// @mixin angled-edge($location, $hypotenuse, $fill, $width: 2800, $height: 100) { position: relative; // polygon points for right triangle $points: ( 'upper left': '0,#{$height} #{$width},#{$height} #{$width},0', 'upper right': '0,#{$height} #{$width},#{$height} 0,0', 'lower left': '0,0 #{$width},#{$height} #{$width},0', 'lower right': '0,0 #{$width},0 0,#{$height}' ); // ensure $fill color is using rgb() $fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + round(blue($fill)) + ')'; // capture alpha component of $fill to use with fill-opacity $fill-alpha: alpha($fill); $wedge: ae-svg-encode('<svg height="#{$height}" width="#{$width}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>'); @if ($location == 'inside top') { &::before { @include ae-pseudo($wedge, $height); top: 0; } } @else if ($location == 'outside top') { &::before { @include ae-pseudo($wedge, $height); top: -$height * 1px; } } @else if ($location == 'inside bottom') { &::after { @include ae-pseudo($wedge, $height); bottom: 0; } } @else if ($location == 'outside bottom') { &::after { @include ae-pseudo($wedge, $height); bottom: -$height * 1px; } } @else { @error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`'; } @if (map-has-key($points, $hypotenuse) == false) { @error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`'; } } |
sponsors
