【CSS】画像ファイルを使わずに縦縞・横縞を表示する

画像ファイルを使わずに CSS のみで縦縞・横縞を表示するよ。

手順書

See the Pen
Untitled by 108nen (@108nen)
on CodePen.

解説

縦縞や円の縞模様は、特に難しいところはない。

横縞の場合、模様を意図した色の順番で等間隔で並べたい場合、色の始点を調整する必要がある。
この辺は、padding の値や要素の位置によって変わってくるので、都度調整する必要あり。ベストプラクティスは分からなかった。
調整済みは Horizontal(offsetted) としてデモに表示してる。

円については、repeating-radial-gradient の第 1 引数に circle を追記することで正円になる。circle を抜くと要素の縦横比に合わせて、楕円になる。縦横比が 1:1 の場合は、正円になる。

まとめ

いろんな形の西瓜模様が作れちゃう！