<p>縦ボーダー</p>
<div class="box bg_border"></div>
<p>横ボーダー</p>
<div class="box bg_border is-side"></div>
.box{
width:100%;
height:200px;
}
/* 縦 */
.bg_border {
background-color: #8be4f0;
background-image:
linear-gradient(-90deg, #fff 50%, transparent 50%);
background-size: 14px 14px;
}
/* 横 */
.is-side{
background-image:
linear-gradient(#fff 50%, transparent 50%,transparent 100%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.