【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 の場合は、正円になる。

まとめ

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

カテゴリー「プログラミング覚書」の最近の記事
タグ「CSS」を含む最近の記事