css - 繰り返し線形グラデーションを使用して斜めの境界線で線幅を同じに保つ方法は?

Question

各行の間に間隔のある広い線がある境界線で繰り返し線形グラデーションを使用しようとしています。1px6px

誰かが私が間違っていることを教えてくれるので、線が繰り返されるときに同じ幅ではありませんか? ピクセル値を微調整しようとしましたが、決して一致しません。

JSFiddle

background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 6px);

Answer 1

Ana によるこの CSS トリックの記事に基づくと、ブラウザによってレンダリングに違いがあるようrepeating-linear-gradientです。記事の最後に比較スクリーンショットがあり、レンダリングが Windows 上の Firefox では正しいが、Windows 上の Chrome と OS X 上の Firefox ではそうではないことが強調されています。

解決：

1 つの解決策が設定されているbackground-sizeようで、2 つのストロークがグラデーションの一部になります (問題のコードではストロークが 1 つしかない場合とは異なります)。背景サイズは、最後のカラー ストップ ポイント (14px) を 2 の平方根 (約 10px) で割った値として計算されます。

background-sizeOpera や Chrome では動作しないため、設定は必須です。線が少し太くなるように見えますが、少なくとも以前よりはうまく機能しているようです.

これは Chrome、Opera、Edge、IE11、Windows の Firefox、OS X の Firefox で動作します。

.border {
  background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 7px, transparent 7px, transparent 8px, #fff 8px, #fff 14px);
  background-size: 10px 10px; /* equal to last color stop point / sqrt(2) - 14 / 1.414 */
  height: 50px;
}

<div class="border"></div>

以下は、OS X 上の Firefox のスクリーンショットです (スクリーンショットはweb-tiki に感謝します)。