CSS斜切虛線效果

by wllai2001

HTML

<div class="j7z7l_">
  <div class="_1AsWWl"></div>
</div>

CSS

.j7z7l_ {
    padding: 3px 0;
}

._1AsWWl {
    height: 0.1875rem;
    width: 100%;
    background-position-x: -1.875rem;
    background-size: 7.25rem 0.1875rem;
    background-image: repeating-linear-gradient(45deg,#6fa6d6,#6fa6d6 33px,transparent 0,transparent 41px,#f18d9b 0,#f18d9b 74px,transparent 0,transparent 82px);
}