<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
	<div id="comicbookpanels">
		  <img src="boxers.jpg" alt>
  <img src="boxers.jpg" alt="Two boxers fighting in a ring">
    		<p>
			    <span>The blows</span>
			    <span>landed like</span>
    			<span>a hammer…</span>
  		</p>
</div>
<svg id="clippingpaths">
	  <defs>
		    <clipPath id="leftpanel" clipPathUnits="objectBoundingBox">
			      <polygon points="0,0 .61,0 .49,1 0,1" />
  </clipPath>
  <clipPath id="rightpanel" clipPathUnits="objectBoundingBox">
			      			<polygon points="1,0 .61,0 .49,1 1,1" />
  </clipPath>
	  </defs>   
</svg>

@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;
		}
body { 
  margin: 0;
  font-family: SequentialistBB, script;
  background: hsl(0, 100%, 30%);
}
#comicbookpanels { 
	position: relative;
	width: 80%;
  max-width: 1000px;
	margin: 1.6rem auto;
}
#comicbookpanels img { 
	position: absolute;
}
#comicbookpanels img {
	top: 0; left: 0;
	width: 100%;
}
#comicbookpanels p { 
	position: absolute;
	left: 50%;
	margin-top: 30%;
  font-size: 1.4rem;
}
	#comicbookpanels span { 
		background: #fff;
		border: 2px solid #000;
		padding: .5rem;
		display: block;
		position: relative;
		margin-top: 1rem;
	}
	#comicbookpanels p span:first-child { 
		margin-left: 1rem;
	}
	#comicbookpanels p span:last-child { 
		margin-left: -1rem;
	}
#comicbookpanels img:first-of-type {
		clip-path: url(#leftpanel);
		clip-path: polygon(0 0, 61% 0, 49% 100%, 0 100%);
	}
#comicbookpanels img:last-of-type {
		top: 2rem;
		left: 1rem;
    clip-path: url(#rightpanel);
		clip-path: polygon(100% 0, 61% 0, 49% 100%, 100% 100%);
	}
#clippingpaths {
    height: 0;
}