CSSで目の細かい斜めストライプはきれいに作れない？:メモ

頑張った割りにどうにもならず諦めたので、忘れないうちにメモとして。

テーマは、CSSによる斜線の作成の現実です。

実現したかったこと

実現したかったことは以下のとおり。

• 2色の斜めストライプをCSSだけで作成する
• 2色のうち、いずれかの幅は4px以下

試したところ、実用に足るきれいさにはなりませんでした。

試した斜めストライプの作り方

試したのは以下のページで紹介されている方法です。

1. 8ステップで完成！CSS3で「斜めのストライプ」を作る方法
2. CSSグラデーションで作った背景パターンのサンプル

1に関しては、該当ページのサンプルでわかりますが、斜線の繋がりがガタついてしまいます。

2に関しては、次項にこの方法を使って作ったサンプルとともに記載します。

サンプル

サンプルは、2色のうち1色を10pxで固定し、残りの線幅を5から1pxまで変化させています。

5pxでは影響はないと思いますが4pxからちょっと怪しくみえるかと思います。

いずれも閲覧環境による問題という可能性はありますが、安定性に欠けているともいえますので断念しました。

1pxの斜線の中に2pxの斜線が混じるストライプも味があるとは思うのですが、意図的ではない以上安定性に欠けますし、整ったストライプを求めているのであれば採用は難しいでしょう。

10pxと5pxの斜めストライプ

background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 10px, #333 0, #333 15px);

10pxと4pxの斜めストライプ

background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 10px, #333 0, #333 14px);

10pxと3pxの斜めストライプ

background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 10px, #333 0, #333 13px);

10pxと2pxの斜めストライプ

background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 10px, #333 0, #333 12px);

10pxと1pxの斜めストライプ

background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 10px, #333 0, #333 11px);

10pxと1pxの斜めストライプ。

結び

5px以上のストライプなら前項2のrepeating-linear-gradientできれいな斜めストライプができましたから、迷う必要はなさそうです。

今回のように4px以下の斜線を使ったストライプを実現する場合はCSSのみでの作成は諦めて、素直に画像を使う方が早く意図通りの素材を作れると思います。