CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック

CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。
画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。

CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかなラインで実装するテクニックを紹介します。

Avoiding jagged edges on gradients.
by Mandy Michael

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

斜めのラインがギザギザになってしまうのを回避する方法

よく見かけるデザインの一つに、コンテナの下部に斜めのカラーブロックを配置したものがあります。下記の画像のようなデザインです。

斜めのカラーブロック

このデザインがたまたま、わたし達が手がけるプロジェクトに現れました。画像やSVGで実装するのではなく、線形グラーデションを使用することにしました。その利点は、CSSで実装すると角度やカラーを変更するのが非常に簡単だからです。

その際にわたし達が抱えていた問題点は、グラデーションによる斜めのラインがギザギザのエッジを引き起こすことでした。
背景をホワイトにすると、ギザギザがよく分かります。非常に目立ちますね。

グラデーションによる斜めのラインがギザギザに

幸いなことに、この問題を解決する簡単な方法を見つけたので、ここで紹介します。通常、線形グラデーションで斜めの線を作成する場合は、下記のように記述します。

このCSSにより、0%から75%まではホワイト、75%からはブラックになります。通常はシャープなラインが作成されますが、角度やコンテナの大きさによってはギザギザになってしまいます。

この問題を解決するには、非常に小さな変更が必要です。
2番目の%に小数点を追加すると、グラデーションにわずかなぼかしが加わります。このぼかしが目立ちすぎないように、使用状況に応じて調整する必要はありますが、視覚的に滑らかなグラデーションになります！

左: ギザギザ、右: 滑らかなグラデーション

CodePenにデモをアップしたので、実際に確認してみてください。

このテクニックが、あなたに役立つことを願います！

補足:
Twitterでcalc()を使用するコメントをいただきました。
calc()を使用しても同じことを実現できます。