JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<script src="https://code.jquery.com/jquery/"></script>
<div id="box">
  <div class="circle">
  </div><div class="arrow">
  </div><div class="rectangle">
  </div><div class="arrow">
  </div><div class="triangle">
  </div><div class="arrow">
  </div><div class="rectangle">
  </div>
</div>

<div id="box">
  <div class="circle">
  </div><div class="arrow">
  </div><div class="rectangle">
  </div><div class="arrow">
  </div><div class="arrow">
  </div><div class="triangle">
  </div><div class="rectangle">
  </div>
</div>

CSS

#box > div {
  display: inline-block;
  position: relative;
  margin: 10px;
}

.circle {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background-color: blue;
}

.arrow {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 25px solid red;
  border-bottom: 15px solid transparent;
}

.rectangle {
  width: 30px;
  height: 30px;
  background-color: green;
}

.triangle {
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 25px solid orange;
  border-left: 15px solid transparent;
}

#box > div + div:after {
  border-bottom: 1px dotted #666;
  content: ' ';
  height: 0px;
  width: 60px;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: -60px;
}

#box > div + div.triangle:after {
  top: 10px;
}

#box > .arrow + .arrow {
  top: 50px;
  left: -45px;
}

#box > .arrow + .arrow:before {
  border-left: 1px dotted #666;
  content: ' ';
  height: 50px;
  width: 1px;
  z-index: -1;
  position: absolute;
  top: -50px;
  left: -60px;
}

#box > .arrow + .arrow ~ div:nth-child(odd) {
  left: -95px;
}

#box > .arrow + .arrow ~ div:nth-child(even) {
  top: 50px;
  left: -45px;
}