title: Creating arrow-headed background divs
body: <p>How can I create this with CSS:</p>
  
  <p><img src="https://i.stack.imgur.com/bCKlb.png" alt="picture of my title and usbtitle"></p>
  
  <p>I've tried using ::after and ::before, each with transform: skew(20deg) or skew -20deg, but it'll only work if the subtitle fits on one line, and there's no guarantee of that.</p>
  
  <p>Having trouble, could really use a pointer or two. I'm trying to support IE9 and up, but more importantly the mobile OS's Android 4+ and iOS 7+</p>
  
  <p>I'd be open to using SVG as well. I'm just less familiar with integrating it with HTML.</p>