はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

CSS のみで縞模様、水玉模様を作る

CSS のみで縞模様、水玉模様を作る

CSSのみで、縦縞・横縞、水玉模様を作れることがわかったのでメモ。

参考にしたリンクはこちらです。

honttoni.blog74.fc2.com

サンプル

縞模様のサンプル

codepen.io

水玉のサンプル

codepen.io

縦縞・横縞・斜縞

linear-gradient + background-size を組み合わせることで、 縞模様を作ることができる。

縦縞

backgound: linear-gradient(left, $color1, $color1 50%, $color2 50%, $color2); で、左から、開始色$color1 から 半分の50[%]まで同じ色の$color1 で塗り、 残り半分を$color2 で塗り、2色の縦縞を作ることができる。

そして、 background-size: Xpx Ypx; で、2色の縦縞を指定サイズにして、 要素に(タイルのように)敷き詰めることができる。

サイズ(width, height)、色(color1, color2)と縞の数 の指定できるsassコードは以下のようになる。

cssで縦縞(vertical-stripes)

横縞

横縞も同様である。 linear-gradienttop からにすればいい。

cssで横縞(horizontal-stripes)

斜め縞

縦縞、横縞とほぼ同じで、 linear-gradientleft top または、 right top からにすればいい。

左上角から色1, 色2の計2色では、斜め縞にならないので、 色1, 色2, 色1, 色2の計4色を並べることで、斜め縞になる。

cssで斜め縞(diagonal-stripes)

水玉模様

水玉模様も、縞模様同様で、 >linear-gradientradial-gradient に変更すれば同じ原理で作ることができる。

Sassのコードは以下。

cssで水玉模様