Several Connectors

Multiple curved connectors using CSS rounded corners

by ewino

HTML

<div class="relative-container">
  <div class="connector" style="height: 50px; top: 0px;"></div>
  <div class="connector" style="height: 200px; top: 50px;"></div>
  <div class="connector" style="height: 150px; top: 100px;"></div>
  <div class="connector" style="height: 300px; top: 50px;"></div>
  <div class="connector" style="height: 200px; top: 100px; transform: scaleY(-1)"></div>
</div>

SCSS

.relative-container {
  position: relative;
}

.connector {
  display: block;
  position: absolute;
  width: 150px;
  height: 250px;
  
  &:before {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 50%;
    width: 50%;
    border-top: 1px solid blue;
    border-right: 1px solid blue;
    border-radius: 0 100% 0 0;
  }
  
  &:after {
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    height: 50%;
    width: 50%;
    border-bottom: 1px solid blue;
    border-left: 1px solid blue;
    border-radius: 0 0 0 100%;
  }
}