CSSでストライプ柄を作成

CSSでストライプのパターンを作成するには「repeating-linear-gradient」を利用することで簡単に作成することが出来ます。
当ページでは、ストライプの色や幅などを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="box">
</div>

<style type="text/css">
 /* --- ストライプ背景 ------------------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                  /* ストライプパターンのCSS */
  background : repeating-linear-gradient(45deg,
                                         #ff4d4d,
                                         #ff4d4d 20px,
                                         #ffffff 0,
                                         #ffffff 40px);
}
</style>