columns with dotted separator

by Richard Hunter

HTML

<div class="container">


  <ul class="list">
    <li class="first">
      <ul class="sublist">
        <li>alpha</li>
        <li>beta</li>
        <li>gamma</li>
      </ul>
    </li>
<div class="divider">

</div>
    <li class="second">
      <ul class="sublist">
        <li>alpha</li>
        <li>beta</li>
        <li>gamma</li>
      </ul>
    </li>
<div class="divider">

</div>
    <li class="third">
      <ul class="sublist">
        <li>alpha</li>
        <li>beta</li>
        <li>gamma</li>
      </ul>
    </li>
  </ul>
</div>

SCSS

body {
  padding: 100px;
  background: pink;
}

.container {
  background:white;
  
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list {
  display: flex;
  justify-content: space-between;
 

  &>li {
    width: 10%;
    flex-grow: 1;
    padding-left: 20px;
    padding-right: 20px;
  }

}
.divider {
  width: 0;
  background: white;
  border-right: solid 3px green;
  border-right-style: dotted; 
  border-right-color: rgba(213, 126, 0, 1); 
  border-image-source: url('https://cl.ly/3c2J3c0l3r0P/dots.svg');
  border-image-slice: 30% 20%;

  border-image-outset: 0;
  border-image-repeat: round;

}

.first, .second, .third {

}
.first {
  border-left: none;
}

.second {}

.third {

}

.first >ul {
  background: orange;
}

.second >ul {
  background: yellow;
}

.third >ul {
  background: aqua;
}

.sublist>ul {
  background: lightblue;
}