background: linear-gradient斜めのジャギーをなめらかに

[非推奨] linear-gradientで背景色の斜め指定は角度や長さ等によりジャギーが発生するので、疑似クラス(::before::after)のボーダーで指定する方法を推奨します。

CSSで背景色を2トーンカラーなどで斜めにした場合、角度(deg)指定によっては境目にジャギーが発生します。

 

たとえば以下の場合だと、色と色の境目にジャギー(ギザギザ)が発生します。

background: linear-gradient(-45deg, #ffe 0%, #ffe 50%, #ff3 50%, #ff3 100%);

 

その場合は、第三属性値に小数点以下の数値設定をすることで解消されます。

background: linear-gradient(-45deg, #ffe 0%, #ffe 50%, #ff3 50.5%, #ff3 100%);

 

#ff3 50% ⇒ #ff3 50.5%

 

これは解像度で描写できない箇所が実際はぼやけているのですが、プロパティの仕様上の関係でそこまでの精度で描画できないため、滑らかな斜めに見えるようです。

ですので、大きさや角度によりアンチエイリアスとなり境界線が不鮮明になりぼやける場合があるので、縦横の確度や背景画像などと組み合わせる場合のみの使用に留めておいた方が良いようです。

ちなみに、第二属性値や、すべての属性値に小数点を指定するとなぜかジャギーは改善されないようでした。