背景に斜線のパターンを入れられるCSS！レスポンシブ対応

2018年11月9日

斜線入りの黄色背景

見出しの背景などでたまに使いたくなる斜線パターン。
イラストレーターなどで簡単に作れますが、CSSでも作れます。

.bg-stripe-45 {
  background-image: linear-gradient(
    -45deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 25%,
    rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 50%, rgba(255,255,255,0.0) 75%,
    rgba(255,255,255,0.4) 75%, rgba(255,255,255,0.4) 100%
  );
  background-size: 10px 10px;
  background-repeat: repeat;
}
@media screen and (min-width: 768px){
  .bg-stripe-45 {
    background-size: 20px 20px;
  }
}

これを、背景色を指定する以下のクラスと一緒にかけてあげるとできます。

.bg-yellow {
  background-color: #FFCC00;
}