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

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

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

2021-11-19 |

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

手順書

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

解説

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

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

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

まとめ

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