Single Connector

A curved connector using CSS rounded corners

by ewino

HTML

<div class="connector"></div>

SCSS

.connector {
  display: block;
  position: relative;
  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%;
  }
}