<div class="speech-bubble">
  <h1>Hello</h2>
  <p>How are you!</p>
</div>
.speech-bubble {
	position: relative;
	background: #00aabb;
	border-radius: .4em;
  width:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:white;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #00aabb;
	border-bottom: 0;
	margin-left: -20px;
	margin-bottom: -20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.