Center text over a responsive triangle?
<p>I have to center text on top of (or inside of) a triangle, which is bleeding off the right side. Ideally I'd like it to be responsive, but all I could get to work was fixed pixel widths/margins on both the triangle and the content. Like so:</p>

<p><a href="https://jsfiddle.net/DTcHh/16117/" rel="nofollow"><strong>View my Demo</strong></a> </p>

<pre><code>.triangle-down:after {
  content: "";
  border-style: solid;
  position: absolute;
  right: 0;
  top: 0;
  margin-left: -450px;
  border-width: 550px 450px 0 450px;
  border-color: red transparent transparent transparent;
}
</code></pre>

<p>You can see what I'm trying to accomplish better if you look at it wider than 960px. (It will just be a red rectangle below 768px.) I suppose I can work with this if there's no other choice because I can make sure the text inside the triangle will always be <em>roughly</em> the same word count. </p>

<p>But is there a better way to accomplish this layout in a responsive design without having to use fixed pixels?</p>