コピペで簡単!CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート

ジグザグ、波状、罫線、アイソメトリックスなど、CSSで実装されたさまざまな背景用パターンをコピペで簡単に利用できるオンラインツールを紹介します。

カスタマイズにも対応しており、前景と背景のカラー、不透明度、サイズを簡単に変更できます。

CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなどの背景用パターン

CSS Background Patterns

ツールの利用は、下記ページから。
登録など、面倒なことは一切不要です。

サイトのキャプチャ

CSS Background Patterns

使い方は、簡単です。
使用したいパターンのボタンをクリックすると、CSSがコピーできます。
カスタマイズは上部のバーからカラーや不透明度やサイズを変更できます。

サイトのキャプチャ

左のアイコンは背景をそのパターンに変更します。

登録されているパターンは、下記の通り。

パターンの一覧

登録されているパターンの一覧

いくつか気になったパターンをピックアップしてみました。

サイトのキャプチャ

ZigZag

ジグザグのCSSは、下記の通りです。

サイトのキャプチャ

Wavy

ウェービー、波状のCSSは、下記の通りです。

サイトのキャプチャ

Lines v3

水平の罫線のCSSは、下記の通りです。

サイトのキャプチャ

Isometric

アイソメトリックスのCSSは、下記の通りです。

sponsors

top of page

©2020 coliss