I've been experimenting with creating a CSS zigzag vertical border and came across this Codepen for inspiration. However, my attempts only result in diamond shapes and I've been struggling to make it work. Here is the link to my Codepen.
body {
margin: 0;
padding: 0;
}
#ribbon {
background: whitesmoke;
}
#ribbon ul {
margin: 0;
padding: 0;
height: 100px;
display: flex;
list-style-type: none;
}
#ribbon ul li {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
cursor: pointer;
}
#ribbon ul li:not(:last-child) {
border-right: solid;
}
#ribbon .v-zigzag {
background: linear-gradient(135deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(225deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(45deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(315deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb);
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
}<section id="ribbon">
<ul>
<li class="v-zigzag">Mode 1</li>
<li>Mode 2</li>
<li>Mode 3</li>
<li>Mode 4</li>
</ul>
</section>