<section>
  <blockquote class="speech bubble">Did someone say <em>chimichangas?</em></blockquote>
</section>
<section>
  <blockquote class="whisper bubble">That’s the sound of my brain</blockquote>
</section>
<section>
  <blockquote class="electric bubble">Autobots,<span>Attack!</span></blockquote>
</section>

@font-face {
		font-family: 'SequentialistBB';
		src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/306FA6_1_0.woff2') format('woff2'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/306FA6_0_0.woff') format('woff');
		font-style: normal;
		font-weight: 400;
		}
	@font-face {
		font-family: 'SequentialistBB';
		src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/306FA6_0_0.woff2') format('woff2'),
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/306FA6_0_0.woff') format('woff');
		font-style: italic;
		font-weight: 400;
		}
* { 
  box-sizing: border-box;
}
body { 
    font-family: SequentialistBB, cursive; 
    font-size: 2.5vw; 
    margin: 0;
}
section { 
  min-height: 100vh; 
  display: flex;
  justify-content: center;
  align-content: center;
}
section { 
  padding: 3rem; 
}
section:nth-of-type(1) {
    background: #d52b21;
}
section:nth-of-type(2) {
    background: #fff;
}
section:nth-of-type(3) {
  background: #0388fe;
}
blockquote.bubble { 
	background-position: center;
  background-repeat: no-repeat !important;
	background-size: 100% 100%;
  margin: 0 auto;
	text-align: center;
	height: 0;
	box-sizing: content-box;
	line-height: 1;
}
blockquote.speech {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/speech-bubble.svg); 
  width: 25%;
  padding-top: 6%;
	padding-bottom: 20%;
}
blockquote.whisper {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/whisper.svg); 
  width: 25%;
  font-size: 2vw;
  color: #ccc;
  font-style: italic;
  padding: 6% 5% 15%;
}
blockquote.electric {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/electric.svg); 
  width: 25%;
  font-size: 2.4vw;
  font-style: italic;
  padding: 4% 6% 12% 0%;
}
blockquote.electric span {
  display: block;
  font-size: 3vw;
  font-weight: bold;
}

/* Speech bubble SVG code:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 132 136">
<defs>
<style>
	path { 
		fill: white;
		stroke: #000;
		stroke-width: 4;
		stroke-linejoin: bevel;
		vector-effect: non-scaling-stroke;
	}
</style>
</defs>
<path d="M66.1 1.5C30.4 1.5 1.5 22.9 1.5 46c0 18.1 17.9 33.5 42.8 39.3 1.5 14.8-1.3 39-8.5 48.1 10.8-12.5 22.4-33.6 26.6-45.7 1.2 0 2.5.1 3.7.1 35.7 0 64.6-18.7 64.6-41.8S101.8 1.5 66.1 1.5zM35.8 133.4c-.3.4-.7.8-1 1.1.4-.3.7-.7 1-1.1z"/></svg>

Whisper bubble SVG code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500" preserveAspectRatio="none">
	<defs>
<style>
	path { 
		fill: white;
		stroke: #ccc;
		stroke-width: 4;
		stroke-linejoin: bevel;
		stroke-dasharray: 20,10;
		vector-effect: non-scaling-stroke;
	}
</style>
</defs>
<path d="M372.8,14.3c-196.9,0-356.2,84.9-356.2,176.6c0,71.8,98.7,132.9,236,156C260.8,405.6,269,439,312,471c-22-49-30-78-13-118
c6.6,0,66.6,3.3,73.8,3.3c196.9,0,356.2-74.2,356.2-165.9S569.7,14.3,372.8,14.3z"/>
</svg>

Electric speech bubble:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150" preserveAspectRatio="none">
<defs>
<style>
	path { 
		fill: white;
		stroke: #231F20;
		stroke-width: 4;
		stroke-linejoin: miter;
		vector-effect: non-scaling-stroke;
	}
</style>
</defs>
<path d="M32.7,18.3c11,5,33.3,3.3,37-11.3 c11.7,8.7,40,11.3,54.7,0c7.3,10,36.7,13.3,46,0c0.3,8,29,16.7,39.3,11.7C202.3,27,212,40.7,229,42c-11.7,6-7.7,28.3,0,32.7 c-11,1-14.3,12.3-14.3,12.3l34.7,25.3l-12.7,2.3l36.7,21l-52.9-12.6l6.2-6.4l-28.3-16.3c0,0-14.7,14-14.3,19.3 c-10-5-36,3.7-44.3,13.3c-9.7-13.7-40.3-12.7-56-2c-7-10.3-37.7-11.7-48.7-10.7c7.2-9.7-9.3-31.7-27-35c14-5,19.7-34.3,6.7-40.7 C30.3,43.3,39.7,28,32.7,18.3z"/>
</svg>

*/