<div class="or-spacer">
  <div class="mask"></div>
  <span><i>or</i></span>
</div>

<div class="or-spacer-vertical left">
  <div class="mask"></div>
</div>

<div class="or-spacer-vertical right">
  <div class="mask"></div>
</div>

@import "compass/css3";

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
}

.or-spacer {
  width:400px; 
  position:relative; 
  
  .mask { 
    overflow:hidden; 
    height:20px; 
    &:after { 
      content:''; 
      display:block; margin:-25px auto 0;
      width:100%; height:25px;  
      border-radius:125px / 12px;  
      box-shadow:0 0 8px black;
    }
  }
  span {
    $size:50px;
    width:$size; height:$size; 
    position:absolute; 
    bottom:100%; margin-bottom:-$size/2;
    left:50%; margin-left:-$size/2;
    border-radius:100%;
    box-shadow:0 2px 4px #999;
    background:white;
  }
  span i {
    $offset:4px;
    position:absolute;
    top:$offset; bottom:$offset;
    left:$offset; right:$offset;
    border-radius:100%;
    border:1px dashed #aaa;
    
    text-align:center;
    line-height:40px;
    font-style:normal;
    color:#999;
  }
}



// vertical variation

.or-spacer-vertical {
  display:inline-block;
  margin-left:100px;
  width:100px; 
  position:relative; 
  
  .mask { 
    overflow:hidden; width:20px; height:200px; 
    //outline:1px solid pink;
  }
  &.left .mask:after { 
    content:''; 
    display:block; margin-left:-20px;
    width:20px; height:100%;  
    border-radius:12px / 125px;  
    box-shadow:0 0 8px black;
  }
  &.right .mask:before { 
    content:''; 
    display:block; margin-left:20px;
    width:20px; height:100%; 
    border-radius:12px / 125px; 
    box-shadow:0 0 8px black;
  }
}