[CSS]ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ

長方形ではないヘッダやコンテンツが最近増えてきました。その一つとしてヘッダの下、コンテンツを区切るラインを斜めにすることで、簡単にデザインの印象を変えることができます。一見シンプルに見えますが、実装するには慎重を要します。

ラインを斜めに実装するCSSやSVGのテクニックをコードのシンプルさ、コンテンツの生成、対応ブラウザ、パフォーマンスの面から実装に適した方法を詳しく紹介します。

ラインを斜めに実装するCSSやSVGのテクニック総まとめ

Ultimate Guide to Non-Rectangular Headers

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

斜めのラインをCSSやSVGで作成する方法

長方形ではないヘッダをつくるために最も人気が高いのは、斜めのラインを使うことです。単に斜めのラインを作成するのはそれほど難しくはありませんが、レスポンシブ対応でカスタマイズが簡単な実装となるとその難易度は上がります。

斜めのラインを使ったヘッダのキャプチャ

長方形ではない、斜めのラインを使ったヘッダ

ここでは以下の基準を満たした区切り線の実装を目指します。

CSSがシンプルであること
CSSは垂直方向と水平方向の両方で簡単に配置でき、ヘッダだけでなく、ページ上のどこでも簡単に再利用できる。
コンテンツの生成
:before, :after擬似要素を使い、要素の前や後にコンテンツを生成できる。
参考: なにかと便利な「:before, :after擬似要素」の使い方
ブラウザのサポート
デスクトップ・スマホなど、すべての(多くの)ブラウザで機能する。
パフォーマンス
これは重要なポイントで、ベンチマークのPaintingが100ms以下。

斜めのラインの実装方法の比較

ここで紹介する各実装方法のマトリックスです。

斜めのラインの実装方法の比較

斜めのラインの実装方法の比較

実装方法の比較の結果

これらの詳細については、下記をご覧ください。

実装コードについて

  • 各実装は基本的なコードのみですが、水平方向・垂直方向・左右逆、ヘッダ下・コンテンツ下に利用できます。
  • 変数を使用しています。しかしCSSの変数はすべてのブラウザにサポートされていないので、非サポートブラウザでは値を記述してご利用ください。
    参考: CSSのプロパティを変数で指定する方法

斜めのラインをCSSのボーダーで作成

See the Pen Diagonal Separator Border Hack by Ahmad Nassri (@ahmadnassri) on CodePen.

基本のコード

変数を決めて、もしくは任意の値を入れて、ご利用ください。

実装時の注意点

  • 良い点: 斜めの角度を要素の高さでコントロールできる。
  • 悪い点: %で指定することができない(他の単位はすべて可)。
  • 悪い点: 幅いっぱい・高さいっぱいの時はビューポートの単位(vw, vh, vmin)を使う。
  • 悪い点: エフェクトが限定される(box-shadowでシャドウをつくるなど)。

コンテンツの生成

::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できます。

ブラウザのサポート

すべてのメジャーブラウザにサポートされています。

ブラウザのサポート

border-colorのサポート状況

パフォーマンス

Paintingが105sで、これは基準に達していません。しかしそれほど良くない結果ではありません。

パフォーマンス

斜めのラインをCSSのグラデーションで作成

基本のコード

変数を決めて、もしくは任意の値を入れて、ご利用ください。

実装時の注意点

  • 良い点: 斜めの角度を要素の高さでコントロールできる。
  • 悪い点: いくつかのレンダリングエンジンではギザギザ・ぼやけたりします(%の微調整で治ることも)。
  • 悪い点: エフェクトが限定される(box-shadowでシャドウをつくるなど)。

コンテンツの生成

::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できます。

ブラウザのサポート

Opera Miniを除く、すべてのメジャーブラウザにサポートされています。

ブラウザのサポート

CSSグラデーションのサポート状況

パフォーマンス

2.1msで、最も良い結果です。

パフォーマンス

斜めのラインをCSSのシェイプで作成

See the Pen Diagonal Separator CSS Shapes by Ahmad Nassri (@ahmadnassri) on CodePen.

基本のコード

変数を決めて、もしくは任意の値を入れて、ご利用ください。

実装時の注意点

  • 悪い点: 生成されたコンテンツが必要。
  • 良い点: 斜めの角度を要素の高さでコントロールできる。
  • 悪い点: エフェクトが限定される(box-shadowでシャドウをつくるなど)。

コンテンツの生成

すでにコンテンツを生成しているので、::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できません。

ブラウザのサポート

一部のブラウザのみサポートされています。

ブラウザのサポート

clip-pathのサポート状況

パフォーマンス

129.8msで、基準値をオーバーしています。

パフォーマンス

斜めのラインをSVGの背景で作成

下記のデモではデータURIを使用しています。外部SVGファイルやSVGシャドウは、Pure CSS Diagonal Separatorsをチェックしてください。

基本のコード

「CSSがシンプル」で「?」にしたのは、シンプルであればSVG画像ファイルを使うのがよいです、SVGはデータURIとして埋め込むこともできコードは少し複雑になります。埋め込む際には、文字のエスケープとエンコーディングが必要です。

変数を決めて、もしくは任意の値を入れて、ご利用ください。

実装時の注意点

  • 良い点: SVG画像はピュアCSSアプローチのために、外部ファイルでもデータURIとしても埋め込むことができます。
  • 良い点: 斜めの角度を要素の高さでコントロールできる。
  • 良い点: 要素とSVGシェイプによるフルのコントロール可(SVGでシャドウをつくるなど)。
  • 悪い点: すべての色と形をSVG画像として作成する必要があります。
  • 補足: SVGの埋め込みはCSSプリプロセッサで簡単に作成できます。

コンテンツの生成

::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できます。

ブラウザのサポート

すべてのメジャーブラウザにサポートされています。

ブラウザのサポート

SVG backgroundのサポート状況

パフォーマンス

一見複雑で、多種多様さを持っているページでもPaintingは、グラデーションに次いで2位の速さです。

パフォーマンス

斜めのラインをSVGのマスクで作成

See the Pen Diagonal Separator SVG Mask by Ahmad Nassri (@ahmadnassri) on CodePen.

基本のコード

変数を決めて、もしくは任意の値を入れて、ご利用ください。

実装時の注意点

  • 悪い点: ベンダープレフィックスが必要。
  • 悪い点: 生成されたコンテンツが必要。
  • 良い点: 斜めの角度を要素の高さでコントロールできる。
  • 良い点: SVG画像はピュアCSSアプローチのために、外部ファイルでもデータURIとしても埋め込むことができます。
  • 良い点: 要素とSVGシェイプによるフルのコントロール可(SVGでシャドウをつくるなど)。

コンテンツの生成

すでにコンテンツを生成しているので、::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できません。

ブラウザのサポート

一部のブラウザのみサポートされています。

ブラウザのサポート

CSSマスクのサポート状況

パフォーマンス

108.8msで、基準値をオーバーしています。

パフォーマンス

斜めのラインをCSSのトランスフォームで作成

See the Pen Diagonal Separator CSS3 2D Transforms by Ahmad Nassri (@ahmadnassri) on CodePen.

基本のコード

変数を決めて、もしくは任意の値を入れて、ご利用ください。

実装時の注意点

  • 悪い点: 斜めの角度を手作業で計算する必要がある。
  • 悪い点: 要素の高さを手作業で計算する必要がある。
  • 悪い点: 生成されたコンテンツが必要。
  • 悪い点: エフェクトが限定される(box-shadowでシャドウをつくるなど)。

コンテンツの生成

すでにコンテンツを生成しているので、::before, ::after疑似要素を使用して、DOMを直接変更せずにHTMLコンテンツを生成できません。

ブラウザのサポート

Opera Miniを除く、すべてのメジャーブラウザにサポートされています。

ブラウザのサポート

CSSトランスフォームのサポート状況

パフォーマンス

117.1msで、基準値をオーバーしています。

パフォーマンス

sponsors

top of page

©2018 coliss