× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Creating a diagonal line/section/border with CSS

web-tiki
Mar 16, 2015
<p>With an svg, it is pretty simple :</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>svg { display: block; width: 100%; height: 90px; background: yellow; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"&gt; &lt;polygon points="100 0 100 10 0 10" /&gt; &lt;/svg&gt;</code></pre> </div> </div> <p></p> <p><em>Note that I used the <code>preserveAspectRatio="none"</code> attribute so that the shape can have 100% width and keep 90px height</em></p> <p>And here with a monkey image :</p> <p></p><div class="snippet"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { position: relative; } svg { display: block; width: 100%; height: 90px; background: yellow; } img { height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: #fff; border-radius: 50%; padding: 10px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"&gt; &lt;polygon points="100 0 100 10 0 10" /&gt; &lt;/svg&gt; &lt;img src="http://images.clipartpanda.com/monkey-clipart-black-and-white-16981-monkey-face-svg.svg" alt="" /&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/29015781/Creating%20a%20diagonal%20line/section/border%20with%20CSS/29016563">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus