A CodePen by Robin Fan. Rounded square counter - prototype

index.html

<div class="word">
  <div class="square"></div>
  <div class="square no1"></div>
  <div class="square no2"></div>
  <div class="square no3"></div>
  <div class="square no4"></div>
</div>
<div class="time">
  <div class="square"></div>
  <div class="square no1"></div>
  <div class="square no2"></div>
  <div class="square no3"></div>
  <div class="square no4"></div>
  <div class="square no5"></div>
</div>

style.scss

@import "compass";
body {
  background-color: #27cebf;
}

$width: 100px;
$height: 100px;
$radius: $width / 9;
$unfinishedColor: #434848;
$finishedColor: white;

@mixin square-base {  
  float: left;
  margin-left: $radius;
  position: relative;
  
  width: $width;
  height: $height;
  background-color: $unfinishedColor;
}

@mixin no-base {
  content: '';
  position: absolute;
  background-color: $finishedColor;
}

.word {
  clear: both;
  overflow: hidden;
  margin-bottom: $radius;
  .square {
    @include square-base;
    
    @include border-radius($radius);

    &.no1:before {
      @include no-base;
      left: 0; top: 0;
      width: $width / 2;
      height: $height / 2;
      @include border-top-left-radius($radius);
    }
    &.no2:before {
      @include no-base;
      left:0; top: 0;
      width: $width / 2;
      height: $height;
      @include border-left-radius($radius);
    }
    &.no3 {
      &:before {
        @include no-base;
        left: 0; top: 0;
        width: $width / 2;
        height: $height / 2;
        @include border-top-left-radius($radius);
      }
      &:after {
        @include no-base;
        left: 0; top: $width / 2;
        width: $width;
        height: $height / 2;
        @include border-bottom-radius($radius);
      }
    }
    &.no4 {
      background-color: $finishedColor;
    }
  }
}

.time {
  clear: both;
  .square {
    @include square-base;
    @include border-radius($radius);

    @for $i from 1 to 5 {
      &.no#{$i}:before {
        @include no-base;
        left: 0; top: 0;
        width: $width * $i / 5;
        height: $height;
        @include border-left-radius($radius);
      }
    }

    &.no5 {
      background-color: $finishedColor;
    }
  }
}