CSSで三角柄の背景を作成

CSSで三角のパターンは「linear-gradient」を45度傾けて繰り返し機能を利用することで簡単に作成することが出来ます。
当ページでは、三角柄の色や大きさ、グラデーションなどを自由に指定しながら実際のデザインを確認することが出来ます。

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

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

<style type="text/css">
/* --- 原稿用紙背景のBOX定義 -------------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                         /* 原稿用紙模様のCSS */
  border     : 2px solid #b35900;   /* ←枠線が不要な場合は削除 */
  background-color   : #ffffff;
  background-image   : 
      linear-gradient(to right,
                         #ffffff,
                         #ffffff     10%,
                         #b35900     11%,
                         #b35900     12%,
                         transparent 13%,
                         transparent 87%,
                         #b35900     88%,
                         #b35900     89%,
                         #ffffff     90%,
                         #ffffff),
      linear-gradient(to bottom,
                         transparent,
                         transparent 97%,
                         #b35900     98%,
                         #b35900);
  background-position: right 2px top;
  background-size    : 52px 41px;
}
</style>