<p>縦チェック</p>
<div class="box bg_check"></div>
<p>斜めチェック</p>
<div class="box bg_skew_check"></div>
<p>半透明チェック</p>
<div class="box bg_check is-transparent"></div>
<p>半透明色変えチェック</p>
<div class="box bg_check is-transparent-mix"></div>
.box{
width:100%;
height:200px;
}
/* 縦 */
.bg_check {
background-color: #fff;
background-image:
linear-gradient(-90deg, #8be4f0 50%, transparent 50%),
linear-gradient(#8be4f0 50%, transparent 50%);
background-size: 20px 20px;
}
/* 斜め */
.bg_skew_check{
background-color: #fff;
background-image:
repeating-linear-gradient(-45deg,
#fc693b, #fc693b 10px,
transparent 0, transparent 20px),
repeating-linear-gradient(45deg,
#fc693b, #fc693b 10px,
transparent 0, transparent 20px);
}
/* 縦半透明 */
.is-transparent{
background-image:
linear-gradient(-90deg, rgba(253, 68, 119, 0.5) 50%, transparent 50%),
linear-gradient(rgba(253, 68, 119, 0.5) 50%, transparent 50%);
background-size: 20px 20px;
}
/* 半透明色変えチェック */
.is-transparent-mix{
background-image:
linear-gradient(-90deg, rgba(63, 171, 234, 0.5) 50%, transparent 50%),
linear-gradient(rgba(253, 68, 119, 0.5) 50%, transparent 50%);
background-size: 20px 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.