<p>右斜めボーダー</p>
<div class="box bg_skew_border"></div>
<p>左斜めボーダー</p>
<div class="box bg_skew_border is-left"></div>
.box{
width:100%;
height:200px;
}
/* 右斜め */
.bg_skew_border{
background-color: #fc693b;
background-image:
repeating-linear-gradient(-45deg,
#fff, #fff 7px,
transparent 0, transparent 14px);
}
/* 左斜め */
.is-left{
background-image:
repeating-linear-gradient(45deg,
#fff, #fff 7px,
transparent 0, transparent 14px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.