CSS で背景にグラデーションを表現する際に利用する linear-gradient() ですが、次のように値を指定することで斜線を表現することができます。

※以下の具体例の表示は、実際に CSS を使って表示しています。ブラウザによって見た目が異なるほか、Internet Explore 9 など linear-gradient() に対応していないブラウザでは斜線が表示されません。

 
.selector {
  background: linear-gradient(45deg, #fff, #fff 49%, #f00 49%, #f00 51%, #fff 51%, #fff);
}

45度の方向（左下から右上となります）で、領域の0から49%までを白、49%から51%までを赤、51%から100%までをまた白で塗り潰すという感じですね。

しかし、45度に傾いた斜線の場合は比較的きれいに表示されるのですが、中途半端な角度ではギザギザが目立ちます。まるでアンチエイリアスが効かない古いブラウザで見ている感覚です。

以下、40度に設定した例です。

 
.selector {
  background: linear-gradient(40deg, #fff, #fff 49%, #f00 49%, #f00 51%, #fff 51%, #fff);
}

ただ、上の斜線は Internet Explorer 11 や Edge ではきれいに見えているかと思います。これら Microsoft 製のブラウザでは、中途半端な角度でもアンチエイリアスが効くようです。

でも、他のブラウザできれいに見えないのはいただけません。まして、Windows よりきれいに表示される筈の Mac で、きれいに見えないのは問題です（笑）。

そこで、linear-gradient() 本来のグラデーションを利用して、擬似的にアンチエイリアスを作ってみます。

 
.selector {
  background: linear-gradient(40deg, #fff, #fff 48.5%, #f00 49.5%, #f00 50.5%, #fff 51.5%, #fff);
}

0から48.5%までを白、49.5%から50.5%までを赤、51.5%から100%までを白としました。白から赤、赤から白に変化するポイントを1%ほど空けることで、その僅かな領域がグラデーションとなり、擬似的にアンチエイリアスがかかったように見えます。

斜線の角度によっては色が変化する間隔を調整する必要があるかもしれませんが、このようにすればあらゆる角度にも対応できるかと思います。