背景チェック
linear-gradient：ほとんどのブラウザ（IE10以降）でベンダープレフィックス必要なし。
※但し「transparent」はsafariで上手く表示されない場合があるので「rgba(255, 255, 255, 0)」にしておくことで回避。
パターンA
.checkA {
background-image: linear-gradient(#ebf3ff 1px, rgba(255, 255, 255, 0) 0), linear-gradient(90deg, #ebf3ff 1px, rgba(255, 255, 255, 0) 0);
background-size: 3px 3px;
}
パターンB
.checkB {
background-image: repeating-linear-gradient(to bottom, rgba(213,233,247,0.5) 0, rgba(213,233,247,0.5) 10px, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 20px), repeating-linear-gradient(to right, rgba(213,233,247,0.5) 0, rgba(213,233,247,0.5) 10px, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 20px);
}
パターンC
.checkC {
background-image: repeating-linear-gradient(45deg, rgba(213,247,230,0.3) 0, rgba(213,247,230,0.3) 7px, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 17px), repeating-linear-gradient(-45deg, rgba(231,247,213,0.5) 0, rgba(231,247,213,0.5) 7px, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 17px);
}
パターンD
.checkD {
background-image: linear-gradient(45deg, rgba(108,157,218,.1) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgba(108,157,218,.1) 75%), linear-gradient(45deg, rgba(108,157,218,.1) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgba(108,157,218,.1) 75%);
background-color: #f6faff;
background-size: 24px 24px;
background-position: 0 0, 12px 12px;
}
パターンE
.checkE {
background-color: #e5edf3;
background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .8) 0px 1px, rgba(255, 255, 255, 0) 1px 14px), repeating-linear-gradient( 45deg, rgba(255, 255, 255, .8) 0px 1px, rgba(255, 255, 255, 0) 1px 14px);
}
