title: Angled end cap on inline element
body: <h1>Goal:</h1>
  
  <p><img src="https://i.stack.imgur.com/TSJwB.png" alt="angled edge sample"></p>
  
  <p>A design calls for an angled edge on inline elements with variable text. It's long enough it might wrap lines, in which case the edge should be applied to the last line (as opposed to the whole block).</p>
  
  <h1>My attempt:</h1>
  
  <h2><a href="http://codepen.io/anon/pen/CjLpG" rel="nofollow noreferrer">http://codepen.io/anon/pen/CjLpG</a></h2>
  
  <p><img src="https://i.stack.imgur.com/MSksl.png" alt="angled text with inspector"></p>
  
  <ol>
  <li>add a span</li>
  <li>on page load, use JS to get the height of the inline text</li>
  <li>create a css trapezoid</li>
  <li>use relative positioning to position</li>
  </ol>
  
  <h1>Works, except:</h1>
  
  <ol>
  <li>It uses javascript</li>
  <li>when the screen or text is resized, it tends to be off by one or two pixels. Safari and Chrome seem to differ in where they apply rounding, so I can't make it consistent.</li>
  </ol>
  
  <p>Is there a better way I can accomplish this effect? </p>
  
  <h1>Other failed ideas:</h1>
  
  <ol>
  <li>some other variation of fancy positioning?</li>
  <li>anything + skewX (it's inline. no dice. all my usual nesting tricks are out the window.)</li>
  </ol>
  
  <h1>Code:</h1>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mark&gt;test text&lt;/mark&gt;&lt;span class="edge"&gt;&amp;nbsp;&lt;/span&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>mark {
      background: #f00;
      padding: 0.1em;
  }
  mark + span {
      border-style:solid;
      border-color:#f00 transparent transparent transparent;
      border-right-width:10px;
      border-bottom-width:0;
      border-left-width:0;
      position:relative;
      pointer-events:none;
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(window).load(function() {
      $('mark + span').each(function(i,span) {
          var $span = $(span);
          var $mark = $span.prev('mark');
          var markHeight = $span.innerHeight();
          var markPaddingTop = Number($mark.css('padding-top').replace(/px/,''));
          var markPaddingBottom = Number($mark.css('padding-bottom').replace(/px/,''));
          $span.css({
            top: markHeight + markPaddingTop,
            'border-top-width': markHeight + markPaddingTop + markPaddingBottom
          })
      });
  });
  </code></pre>