<div class="container">
  
  <div class="arrows">
    <div class="level level1">
      <span class="arrow"></span>
      <span class="arrow"></span> 
      <span class="arrow"></span>
      <span class="arrow"></span>
    </div>
    
    <div class="level level2">
      <span class="arrow"></span>
      <span class="arrow"></span>
      <span class="arrow"></span>
    </div> 
    
    <div class="level level3">
      <span class="arrow"></span>
      <span class="arrow"></span>
    </div> 
    
    <div class="level level4">
      <span class="arrow"></span>
    </div>
  </div>

  <div class="words">
      <span>word one</span>
      <span>word two</span>
      <span>word three</span>
      <span>word four</span>
      <span>word five</span>
  </div>

</div>

/* Variables */
$words: 5;
$background: white;
$color: black;
$arrow-arch: 3px;
$arrow-head: 18px;
$arrow-width: 100%/$words;
$arrow-height: $arrow-width * 1.5;
$height: 30vw;

body {
  width: 100%;
  height: 100%;
  background: $background;
  padding-top: 15%;
}

.container {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 0;
}

.arrows {
  position: relative;
  width: 100%;
  height: $height;
}

.arrow {
  display: block;
  position: absolute;
  float: left;
  overflow: hidden;
  height: 100%;
  
  &:before {
    content: "";
    display: block;
    width: calc(100% - #{$arrow-head / 2 - $arrow-arch});
    height: 200%;
    background: transparent;
    border-radius: 50%;
    border: $arrow-arch solid $color;
    box-sizing: border-box;
  }
  
  &:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: $arrow-head/2 solid transparent;
    border-right: $arrow-head/2 solid transparent;
    border-top: $arrow-head solid $color;
    background: $background;
  }
}

.level {
  position: absolute;
  bottom: 0;
  left: $arrow-width/2;
  width: 100%;
  
  .arrow {
    &:nth-child(2) {
      left: $arrow-width;
    }

    &:nth-child(3) {
      left: $arrow-width*2;
    }

    &:nth-child(4) {
      left: $arrow-width*3;
    }
  }
}

.level1 {
  height: $arrow-height;
  
  .arrow { 
    width: $arrow-width;
  }
}

.level2 {
  height: $arrow-height*2;

  .arrow {
    width: $arrow-width*2;
  }
}

.level3 {
  height: $arrow-height*3;

  .arrow {
    width: $arrow-width*3;
  }
}

.level4 {
  height: $arrow-height*4;

  .arrow {
    width: $arrow-width*4;
  }
}

.words {
  background: $background;
  padding-top: 20px;
  clear: both;
  
  span {
    float: left;
    display: block;
    text-align: center;
    width: $arrow-width;
    box-sizing: border-box;
  }
}