[CSS]ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ
Post on:2017年2月3日
sponsors
長方形ではないヘッダやコンテンツが最近増えてきました。その一つとしてヘッダの下、コンテンツを区切るラインを斜めにすることで、簡単にデザインの印象を変えることができます。一見シンプルに見えますが、実装するには慎重を要します。
ラインを斜めに実装するCSSやSVGのテクニックをコードのシンプルさ、コンテンツの生成、対応ブラウザ、パフォーマンスの面から実装に適した方法を詳しく紹介します。
Ultimate Guide to Non-Rectangular Headers
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 斜めのラインをCSSやSVGで作成する方法
- 斜めのラインをCSSのボーダーで作成
- 斜めのラインをCSSのグラデーションで作成
- 斜めのラインをCSSのシェイプで作成
- 斜めのラインをSVGの背景で作成
- 斜めのラインをSVGのマスクで作成
- 斜めのラインをCSSのトランスフォームで作成
斜めのラインをCSSやSVGで作成する方法
長方形ではないヘッダをつくるために最も人気が高いのは、斜めのラインを使うことです。単に斜めのラインを作成するのはそれほど難しくはありませんが、レスポンシブ対応でカスタマイズが簡単な実装となるとその難易度は上がります。
長方形ではない、斜めのラインを使ったヘッダ
ここでは以下の基準を満たした区切り線の実装を目指します。
- CSSがシンプルであること
- CSSは垂直方向と水平方向の両方で簡単に配置でき、ヘッダだけでなく、ページ上のどこでも簡単に再利用できる。
- コンテンツの生成
- :before, :after擬似要素を使い、要素の前や後にコンテンツを生成できる。
参考: なにかと便利な「:before, :after擬似要素」の使い方 - ブラウザのサポート
- デスクトップ・スマホなど、すべての（多くの）ブラウザで機能する。
- パフォーマンス
- これは重要なポイントで、ベンチマークのPaintingが100ms以下。
斜めのラインの実装方法の比較
ここで紹介する各実装方法のマトリックスです。
斜めのラインの実装方法の比較
実装方法の比較の結果
- CSSがシンプル
- コンテンツの生成
- 対応ブラウザ
- パフォーマンス
これらの詳細については、下記をご覧ください。
実装コードについて
- 各実装は基本的なコードのみですが、水平方向・垂直方向・左右逆、ヘッダ下・コンテンツ下に利用できます。
- 変数を使用しています。しかしCSSの変数はすべてのブラウザにサポートされていないので、非サポートブラウザでは値を記述してご利用ください。
参考: CSSのプロパティを変数で指定する方法
斜めのラインをCSSのボーダーで作成
See the Pen Diagonal Separator Border Hack by Ahmad Nassri (@ahmadnassri) on CodePen.
基本のコード
変数を決めて、もしくは任意の値を入れて、ご利用ください。
|
1 2 3 4 5 6 7 |
.separator { width: 0; height: 0; border-style: solid; border-width: var(--height) var(--width) 0 0; border-color: var(--top-color) var(--bottom-color) transparent transparent; } |
実装時の注意点
- 良い点: 斜めの角度を要素の高さでコントロールできる。
- 悪い点: %で指定することができない（他の単位はすべて可）。
- 悪い点: 幅いっぱい・高さいっぱいの時はビューポートの単位（vw, vh, vmin）を使う。
- 悪い点: エフェクトが限定される（box-shadowでシャドウをつくるなど）。
コンテンツの生成
::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
section { ... } section::after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 50px 300px 0 0; border-color: yellow black transparent transparent; } |
ブラウザのサポート
すべてのメジャーブラウザにサポートされています。
パフォーマンス
Paintingが105sで、これは基準に達していません。しかしそれほど良くない結果ではありません。
斜めのラインをCSSのグラデーションで作成
See the Pen Diagonal Separator Gradient Background Image by Ahmad Nassri (@ahmadnassri) on CodePen.
基本のコード
変数を決めて、もしくは任意の値を入れて、ご利用ください。
|
1 2 3 4 5 |
.separator { width: var(--width); height: var(--height); background-image: linear-gradient(to bottom right, var(--top-color), var(--top-color) 50%, var(--bottom-color) 50%, var(--bottom-color)); } |
実装時の注意点
- 良い点: 斜めの角度を要素の高さでコントロールできる。
- 悪い点: いくつかのレンダリングエンジンではギザギザ・ぼやけたりします（%の微調整で治ることも）。
- 悪い点: エフェクトが限定される（box-shadowでシャドウをつくるなど）。
コンテンツの生成
::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できます。
|
1 2 3 4 5 6 7 8 9 |
section { ... } section::after { width: 100%; height: 50px; background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black); } |
ブラウザのサポート
Opera Miniを除く、すべてのメジャーブラウザにサポートされています。
パフォーマンス
2.1msで、最も良い結果です。
斜めのラインをCSSのシェイプで作成
See the Pen Diagonal Separator CSS Shapes by Ahmad Nassri (@ahmadnassri) on CodePen.
基本のコード
変数を決めて、もしくは任意の値を入れて、ご利用ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.separator { position: relative; width: var(--width); height: var(--height); } .separator::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: var(--top-color); clip-path: polygon(100% 0, 0 0, 0 100%); } .separator::after { position: absolute; content: ""; width: 100%; height: 100%; background-color: var(--bottom-color); clip-path: polygon(100% 0, 0 100%, 100% 100%); } |
実装時の注意点
- 悪い点: 生成されたコンテンツが必要。
- 良い点: 斜めの角度を要素の高さでコントロールできる。
- 悪い点: エフェクトが限定される（box-shadowでシャドウをつくるなど）。
コンテンツの生成
すでにコンテンツを生成しているので、::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できません。
ブラウザのサポート
一部のブラウザのみサポートされています。
パフォーマンス
129.8msで、基準値をオーバーしています。
斜めのラインをSVGの背景で作成
下記のデモではデータURIを使用しています。外部SVGファイルやSVGシャドウは、Pure CSS Diagonal Separatorsをチェックしてください。
See the Pen Diagonal Separator SVG Background Image by Ahmad Nassri (@ahmadnassri) on CodePen.
基本のコード
「CSSがシンプル」で「？」にしたのは、シンプルであればSVG画像ファイルを使うのがよいです、SVGはデータURIとして埋め込むこともできコードは少し複雑になります。埋め込む際には、文字のエスケープとエンコーディングが必要です。
変数を決めて、もしくは任意の値を入れて、ご利用ください。
|
1 2 3 4 5 6 7 |
.separator { width: var(--width); height: var(--height); background-image: url(diagonal.svg); background-repeat: no-repeat; background-size: 100% 100%; } |
実装時の注意点
- 良い点: SVG画像はピュアCSSアプローチのために、外部ファイルでもデータURIとしても埋め込むことができます。
- 良い点: 斜めの角度を要素の高さでコントロールできる。
- 良い点: 要素とSVGシェイプによるフルのコントロール可（SVGでシャドウをつくるなど）。
- 悪い点: すべての色と形をSVG画像として作成する必要があります。
- 補足: SVGの埋め込みはCSSプリプロセッサで簡単に作成できます。
コンテンツの生成
::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
section { ... } section::after { content: ''; display: block; width: 100%; height: 50px; background-image: url(diagonal.svg); background-repeat: no-repeat; background-size: 100% 100%; } |
ブラウザのサポート
すべてのメジャーブラウザにサポートされています。
パフォーマンス
一見複雑で、多種多様さを持っているページでもPaintingは、グラデーションに次いで2位の速さです。
斜めのラインをSVGのマスクで作成
See the Pen Diagonal Separator SVG Mask by Ahmad Nassri (@ahmadnassri) on CodePen.
基本のコード
変数を決めて、もしくは任意の値を入れて、ご利用ください。
|
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 |
.separator { position: relative; width: var(--width); height: var(--height); } .separator::before { position: absolute; content: ''; display: block; width: 100%; height: 100%; background-color: var(--top-color); mask-image: url(diagonal.svg#top); mask-size: cover; } .separator::after { position: absolute; content: ''; display: block; width: 100%; height: 100%; background-color: var(--bottom-color); mask-image: url(diagonal.svg#bottom); mask-size: cover; } |
実装時の注意点
- 悪い点: ベンダープレフィックスが必要。
- 悪い点: 生成されたコンテンツが必要。
- 良い点: 斜めの角度を要素の高さでコントロールできる。
- 良い点: SVG画像はピュアCSSアプローチのために、外部ファイルでもデータURIとしても埋め込むことができます。
- 良い点: 要素とSVGシェイプによるフルのコントロール可（SVGでシャドウをつくるなど）。
コンテンツの生成
すでにコンテンツを生成しているので、::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できません。
ブラウザのサポート
一部のブラウザのみサポートされています。
パフォーマンス
108.8msで、基準値をオーバーしています。
斜めのラインをCSSのトランスフォームで作成
See the Pen Diagonal Separator CSS3 2D Transforms by Ahmad Nassri (@ahmadnassri) on CodePen.
基本のコード
変数を決めて、もしくは任意の値を入れて、ご利用ください。
|
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 |
:root { --vertical-angle: 108.5deg; --horizontal-angle: 18.5deg; } .separator { width: var(--width); height: var(--height); overflow: hidden; } .separator::before { display: block; content: ''; width: 100%; height: 100%; background-color: var(--top-color); transform: skewY(calc(-1 * var(--horizontal-angle))); transform-origin: bottom left; } .separator::after { display: block; content: ''; width: 100%; height: 100%; background-color: var(--bottom-color); transform: skewY(calc(-1 * var(--horizontal-angle))); transform-origin: bottom left; } |
実装時の注意点
- 悪い点: 斜めの角度を手作業で計算する必要がある。
- 悪い点: 要素の高さを手作業で計算する必要がある。
- 悪い点: 生成されたコンテンツが必要。
- 悪い点: エフェクトが限定される（box-shadowでシャドウをつくるなど）。
コンテンツの生成
すでにコンテンツを生成しているので、::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できません。
ブラウザのサポート
Opera Miniを除く、すべてのメジャーブラウザにサポートされています。
パフォーマンス
117.1msで、基準値をオーバーしています。
sponsors
