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

How do I create a teardrop in HTML?

Jun 15, 2015
<h2>SVG approach:</h2> <p>You can achieve the double curve easily with an <strong>inline SVG</strong> and the <code>&lt;path/&gt;</code> element instead of the <code>&lt;polygon/&gt;</code> element which doesn't allow curved shapes.</p> <p>The following example uses the <code>&lt;path/&gt;</code> element with:</p> <ul> <li>2 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Bezier_Curves">quadratic bezier curve commands</a> for the 2 top curves (lines beginning with <code>Q</code>)</li> <li>1 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Arcs">arc command</a> for the big bottom one (line beginning with <code>A</code>)</li> </ul> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="30%" viewbox="0 0 30 42"&gt; &lt;path fill="transparent" stroke="#000" stroke-width="1.5" d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" /&gt; &lt;/svg&gt;</code></pre> </div> </div> <p></p> <p>SVG is a great tool to make this kind of shapes with double curves. You can check this <a href="http://stackoverflow.com/questions/28986125/double-curved-shape">post about double curves</a> with an SVG/CSS comparison. Some of the advantages of using SVG in this case are:</p> <ul> <li>Curve control</li> <li>Fill control (opacity, color)</li> <li>Stroke control (width, opacity, color)</li> <li>Amount of code</li> <li>Time to build and maintain the shape</li> <li>Scalable</li> <li>No HTTP request (if used inline like in the example)</li> </ul> <hr> <p><strong>Browser support</strong> for inline SVG goes back to Internet Explorer 9. See <a href="http://caniuse.com/#feat=svg-html5">canIuse</a> for more information.</p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/30711203/How%20do%20I%20create%20a%20teardrop%20in%20HTML?/30712432">Stack Overflow</a>.</p>
comments powered by Disqus