<div class="bubble">
  <div class="bubble-bg"></div>
  <div class="bubble-content">
    <p>
      A speech bubble of dynamic height, with a background image that appears to flow over onto the arrow.
    </p>
    <p>
      Actually, what's happening is a border hack that overlays part of the content, creating the illusion of an arrow that extends the background.
    </p>
  </div>
</div>
.bubble {
  width: 300px;
  position: relative;
  background-color: #ccc;
}

.bubble-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: -10px; // pull away for extra borders
  bottom: 0;
  background-image: url('https://unsplash.it/400/200?image=0&blur');
  background-size: cover;
  background-position: center;
}

.bubble-bg:before,
.bubble-bg:after {
  box-sizing: border-box;
  position: absolute;
  content: '';
  right: 0;
  height: 50%;
  border: 10px solid transparent;
  border-right-color: #fff;
}

.bubble-bg:before {
  top: 0;
  border-top: 0;
}

.bubble-bg:after {
  bottom: 0;
  border-bottom: 0;
}

.bubble-content {
  position: relative;
  padding: 20px;
  color: #fff;
}

// misc formatting stuff

body {
  margin: 20px;
}

p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.