Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

@mixin triangle($height, $length, $color) {
  width: 0;
  height: 0;
  border-top: $height/2 solid transparent;
  border-left: $length solid $color;
  border-bottom: $height/2 solid transparent;
}

$employeeSchedulesWeekLineHeight: 20px;

$weekLineRedShades: (rgb(96, 47, 40),
                     rgb(115, 57, 49),
                     rgb(135, 65, 56),
                     rgb(155, 75, 65),
                     rgb(181, 88, 76),
                     rgb(206, 100, 86),
                     rgb(231, 113, 97));


.work_period_items_container {
  padding: 10px 10px 0 10px;
}

.week_line {
  height: $employeeSchedulesWeekLineHeight;
  width: 100%;
  padding: 10px 10px 0px 10px;
  margin-bottom: 10px;

  & .day {
    position: relative;
    float: left;
    height: $employeeSchedulesWeekLineHeight;
    width: 14.25%;
  }

  & .day > .right_arrow {
    @include triangle($employeeSchedulesWeekLineHeight, 6px, transparent);
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1000;
  }

  @for $i from 1 through 7 {
    & .day-#{$i} {
      background-color: nth($weekLineRedShades, $i);

      & > .right_arrow {
        border-left-color: nth($weekLineRedShades, $i)
      }
    }
  }
}

SassMeister-output.css

.work_period_items_container {
  padding: 10px 10px 0 10px;
}

.week_line {
  height: 20px;
  width: 100%;
  padding: 10px 10px 0px 10px;
  margin-bottom: 10px;
}
.week_line .day {
  position: relative;
  float: left;
  height: 20px;
  width: 14.25%;
}
.week_line .day > .right_arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 1000;
}
.week_line .day-1 {
  background-color: #602f28;
}
.week_line .day-1 > .right_arrow {
  border-left-color: #602f28;
}
.week_line .day-2 {
  background-color: #733931;
}
.week_line .day-2 > .right_arrow {
  border-left-color: #733931;
}
.week_line .day-3 {
  background-color: #874138;
}
.week_line .day-3 > .right_arrow {
  border-left-color: #874138;
}
.week_line .day-4 {
  background-color: #9b4b41;
}
.week_line .day-4 > .right_arrow {
  border-left-color: #9b4b41;
}
.week_line .day-5 {
  background-color: #b5584c;
}
.week_line .day-5 > .right_arrow {
  border-left-color: #b5584c;
}
.week_line .day-6 {
  background-color: #ce6456;
}
.week_line .day-6 > .right_arrow {
  border-left-color: #ce6456;
}
.week_line .day-7 {
  background-color: #e77161;
}
.week_line .day-7 > .right_arrow {
  border-left-color: #e77161;
}