CSS のみで縞模様、水玉模様を作る
CSS のみで縞模様、水玉模様を作る
CSSのみで、縦縞・横縞、水玉模様を作れることがわかったのでメモ。
参考にしたリンクはこちらです。
サンプル
縞模様のサンプル
水玉のサンプル
縦縞・横縞・斜縞
linear-gradient + background-size を組み合わせることで、 縞模様を作ることができる。
縦縞
backgound: linear-gradient(left, $color1, $color1 50%, $color2 50%, $color2); で、左から、開始色$color1 から 半分の50[%]まで同じ色の$color1 で塗り、 残り半分を$color2 で塗り、２色の縦縞を作ることができる。
そして、 background-size: Xpx Ypx; で、2色の縦縞を指定サイズにして、 要素に（タイルのように）敷き詰めることができる。
サイズ(width, height)、色(color1, color2)と縞の数 の指定できるsassコードは以下のようになる。
横縞
横縞も同様である。 linear-gradient をtop からにすればいい。
斜め縞
縦縞、横縞とほぼ同じで、 linear-gradient をleft top または、 right top からにすればいい。
左上角から色1, 色2の計2色では、斜め縞にならないので、 色1, 色2, 色1, 色2の計4色を並べることで、斜め縞になる。
水玉模様
水玉模様も、縞模様同様で、 >linear-gradient をradial-gradient に変更すれば同じ原理で作ることができる。
Sassのコードは以下。
