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

line with indented circle

web-tiki
Jun 01, 2015
<p>Here is an idea of how you can achieve this layout with an inline svg.</p> <p>In the SVG :</p> <ul> <li>The first path is the line with the indented circle. The indented circle is created with an arc command </li> <li>The second path element is the heart outline. It uses the Bezier curve command for the top part of the heart.</li> </ul> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>img { width: 100%; display: block; } div { position: relative; height: 100px; background: #fff; } svg { position: absolute; bottom: 100%; width: 100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://lorempixel.com/output/sports-q-c-640-200-4.jpg" alt=""&gt; &lt;div&gt; &lt;svg viewbox="0 0 100 18.4"&gt; &lt;path stroke="orange" stroke-width="0.8" fill="#fff" d="M-1 21 V18 H79.5 A7 7 0 1 1 90.5 18 H101 V21" /&gt; &lt;path stroke="orange" stroke-width="0.8" fill="#fff" d="M85 18 L81 13 C80 10 85 10 85 12 C85 10 90 10 89 13z " /&gt; &lt;/svg&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p><em>For more info on the path commands in SVG, see <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths" rel="nofollow">MDN</a></em></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/30506134/line%20with%20indented%20circle/30507281">Stack Overflow</a>.</p>
comments powered by Disqus