背景ストライプ
linear-gradient：ほとんどのブラウザ（IE10以降）でベンダープレフィックス必要なし。
※但し「transparent」はsafariで上手く表示されない場合があるので「rgba(255, 255, 255, 0)」にしておくことで回避。
パターンA
.stripeA {
background: repeating-linear-gradient(90deg,#ebf3ff 0,#ebf3ff 5px,#fff 5px,#fff 10px);
}
パターンB
.stripeB {
background: repeating-linear-gradient(180deg,#d3e9ef 0,#d3e9ef 1px,#ffffff 1px,#ffffff 6px,#d3e9ef 6px,#d3e9ef 7px,#ffffff 7px,#ffffff 17px,#eae3cc 17px,#eae3cc 18px,#ffffff 18px,#ffffff 23px,#eae3cc 23px,#eae3cc 24px,#ffffff 24px,#ffffff 34px,#efd9eb 34px,#efd9eb 35px,#ffffff 35px,#ffffff 40px,#efd9eb 40px,#efd9eb 41px,#ffffff 41px,#ffffff 51px);
}
パターンC
.stripeC {
background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 2px, rgba(238,133,140,0.2) 2px, rgba(238,133,140,0.2) 3px );
}
パターンD
.stripeD {
repeating-linear-gradient(-45deg,rgba(232,230,215,0.3) 0,rgba(232,230,215,0.3) 10px,#fff 10px,#fff 15px);
border: 1px solid rgba(232,230,215,1.0);
}
パターンE
.stripeE {
background-image: linear-gradient(-45deg, #fff, #fff 48.5%, rgba(92, 76, 44, 0.1) 49.5%, rgba(92, 76, 44, 0.1) 50.5%, #fff 51.5%, #fff);
background-size: 7px 7px;
border: 1px solid rgba(183,213,235,0.5);
}
