Creating a responsive, fringed (repeating triangles) css border
<p>I've been working on a pattern for a while which calls for a fringed bottom border on a modal. The problem, is that depending on the viewport size, my current implementation cuts of one side, which is less than ideal.</p>

<p>Here's where the inspiration came from, Google's Wallet app, which implements this via an :after pseudoclass, an image background and  repeats. You can see that the edges are cut off: </p>

<pre><code>.receipt-main-section::after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAkklEQ…MUwBTzA7EIEAtBFbEgK0JWDLKCA6oJqyIGqCAjVAMTuiIAuCdhjWF6oYAAAAAASUVORK5CYII=) 0 0 repeat-x;
content: "";
height: 8px;
margin: 12px 0 0 -22px;
position: absolute;
width: 100%;}
</code></pre>

<p><a href="https://i.stack.imgur.com/MMwjU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MMwjU.png" alt="Google wallet fringe border"></a></p>

<p>Here is my CSS implementation, which also breaks on the edges: </p>

<p><a href="https://i.stack.imgur.com/bhYFy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bhYFy.png" alt="css fringe implementation"></a></p>

<p><a href="http://jsfiddle.net/n28pa3dy/1/" rel="nofollow noreferrer">http://jsfiddle.net/n28pa3dy/1/</a></p>

<p>How can one implement this concept in a way that can handle different widths while maintaining a consistent ratio of fringes, and thus not breaking on the edges?</p>