<div class="wrap">
  <p>
    Information specialists
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cum saepe minus, aperiam modi velit ullam.
  </p>
  <div class="border">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
    <div class="line"></div>
  </div>
</div>

.wrap {
  background: #eee;
  color: #333;
  width: 250px;
  padding: 20px;
  position: relative;
  box-shadow:0 3px 5px rgba(0,0,0,.15);
}
.border {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4px;
  width: 50%;
}
.circle {
  border-radius: 100%;
  position: absolute;
  z-index: 1;
}
.circle-1 {
  width: 38px;
  height: 38px;
  background: #ffffff;
  bottom: -17px;
  left: -19px;
  box-shadow:0 3px 5px rgba(0,0,0,.1);
}
.circle-2 {
  width: 28px;
  height: 28px;
  background: #ff9696;
  bottom: -12px;
  left: -14px;
}
.circle-3 {
  width: 18px;
  height: 18px;
  background: #ff0000;
  bottom: -7px;
  left: -9px;
}
.line {
  position: absolute;
  width: 100%;
  height: 4px;
  background: #ff0000;
  z-index: 9;
  bottom: 0;
  left: 0;
}