title: Long title (multiple lines) in heading with line-height
body: <p>I'm creating a H1 title with css, and added a line-height to it, so the H1 element has the right height and the text is vertically centered.</p>
  
  <p>The problem is with long titles which need multiple lines.</p>
  
  <p>An example is created at jsfiddle: <a href="https://jsfiddle.net/wygpfbm3/" rel="nofollow">https://jsfiddle.net/wygpfbm3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h1&gt;
  This is a normal title
  &lt;/h1&gt;
  
  
  &lt;h1&gt;
  This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long title
  &lt;/h1&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>h1 { background-color: #ebebeb; border: 1px solid #c7c7c7; border-left: none; border-right: none; top: 0px; line-height: 44px; font-size: 18px; font-weight: normal; color: #3e3e3e; }
  h1:before { content: ''; background-color: transparent; border: 6px solid #c7c7c7; border-color: #c7c7c7 transparent transparent #c7c7c7; float: left; }
  h1:after { content: ''; border: 6px solid #fff; border-color: #fff transparent transparent #fff; float: left; margin-left: -12px; margin-top: -1px; }
  </code></pre>
  
  <p>As you can see in the fiddle example, a normal title (single line) is working perfect. When it's a long title, the lines are too far apart (because I set the line-height).</p>
  
  <p>Also the second line doesn't have the padding on the left like the first line. Another problem is with the little white triangle in the top left corner. It's moved down when the title is multiple lines long.</p>
  
  <p>Anyone know how I can solve this in a clean way, preferred with CSS only?</p>