SOURCE

<div class="wrap">
  <div class="blob">
    <span class="blob-content">
      <h2>Big ol' blob headline</h2>
      <span class="blob-connector"></span>
    </span>
  </div>

  <div class="blob">
    <span class="blob-content">
      <p>Lorem ipsum dolor sit amet!</p>
      <span class="blob-connector"></span>
    </span>
  </div>

  <div class="blob">
    <span class="blob-content offset-right">
      <p>Vidisse sanctus an sed suscipit oporteat</p>
      <span class="blob-connector"></span>
    </span>
  </div>

  <div class="blob">
    <span class="blob-content offset-left">
      <p>Lorem ipsum dolor sit amet, suscipit oporteat ea nec</p>
      <span class="blob-connector"></span>
    </span>
  </div>

  <div class="blob">
    <span class="blob-content offset-right">
      <p>Ut ius lobortis pertinacia, vidisse sanctus an sed</p>
      <span class="blob-connector"></span>
    </span>
  </div>

  <div class="blob">
    <span class="blob-content">
      <p>Ne nec purto iuvaret</p>
    </span>
  </div>
</div>

.wrap {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

.blob {
  width: 100%;
  clear: both;
}

.blob-content {
  position: relative;
  display: inline-block;
  margin-bottom: 26px;
  padding: 1em 1.6em;
  border-radius: 50rem;
  
  color: #fff;
  font-family: sans-serif;
  text-align: center;
  background-color: #3f3f3f;

  > * {
    margin: 0;
  }
  
  &.offset-right {
    float: right;
  }

  &.offset-left {
    float: left;
  }
}

.blob-connector {
    position: absolute;
    overflow: hidden;
    bottom: -26px;
    left: calc(50% - 35px); // 35px = half of connector width
    width: 70px;
    height: 26px;    

    &:before, &:after {
        content: '';
        position: absolute;
        top: 0;
        width: 26px;
        height: 26px;
        background: transparent;
        box-shadow: 0 0 0 16px #3f3f3f;
    }

    &:before {
        left: 0;
        border-radius: 0 50em 50em 0;
    }

    &:after {
        right: 0;
        border-radius: 50em 0 0 50em;
    }
}