 <h2>CSS</h2> <p>This is due to the border having to fit in with whatever the triangles height is. Just change with the width in <code>.triangle-left</code> and you will see the responsiveness.</p> <p>It will only resize up to 500px high though but this should be more than adequate.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.contain { width: 100%; } /*Left pointing*/ .triangle-left { width: 5%; height: 0; padding-top: 5%; padding-bottom: 5%; overflow: hidden; } .triangle-left:after { content: ""; display: block; width: 0; height: 0; margin-top:-500px; border-top: 500px solid transparent; border-bottom: 500px solid transparent; border-right: 500px solid #4679BD; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contain"&gt; &lt;div class="triangle-left"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> </div> </div> </p> <h2>SVG</h2> <p>The SVG version just requires positioning.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.contain { height: 30px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contain"&gt; &lt;svg width="100%" height="100%" viewBox="0 0 500 500"&gt; &lt;polygon points="0,250 500,0 500,500" style="fill:red;stroke:black;stroke-width:2" /&gt; &lt;/svg&gt; &lt;/div&gt;</code></pre> </div> </div> </p>