{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 爱情/是我丢掉的垃圾 的问题《How do I create a teardrop in HTML?》','https://www.manongdao.com/q-132510.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
How do I create a shape like this to display on a webpage?
I don't want to use images since they would get blurry on scaling
I tried with CSS:
.tear {
display: inline-block;
transform: rotate(-30deg);
border: 5px solid green;
width: 50px;
height: 100px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}<div class="tear">
</div>That turned out really screwed.
And then I tried with SVG:
<svg viewBox="0 100 100">
<polygon points="50,0 100,70 50,100 0,70"/>
</svg>It did get the shape, but the bottom part wasn't curved.
Is there a way to create this shape so it can be used in an HTML page?
If you do choose to use SVG you should read up on paths. I would also suggest an SVG editor.
CSS Version
As there are a fair few answers here I thought why not add to it with another method. This is using both HTML and CSS to create the teardrop.
This will allow you to change the colour of the border and background of the teardrop and also re-size the top part of it.
Using a single
divwe can create a circle withborderandborder-radius. Then using pseudo elements (:before&:after) we create a CSS triangle more here, this will act as the tip of the teardrop. Using the:beforeas the border we place:afteron top with a smaller size and the desired background colour.Here is a demo of the teardrop with a background colour
It is as simple as putting a background colour onto the
divand changing:afterbottom-bordercolour to the same. To change the border you will need to changedivborder colour and:beforebackground colour too.Here are four progressively simpler SVG teardrop shapes:
Your main issue with your CSS code was:
So, by 'fixing' these issues, you would generate:
Please also note to save on CSS length, you could re-write your border-radius properties to:
this could be enhanced with pseudo elements as shown in this fiddle
Alternatives
I found this by Vinay Challuru on codepen.
Please note that with the logic here, I was able to create the SVG to nearly any possible build shape/etc. For example, a quick output was:
It's using an SVG and allows you to alter the shape in multiple ways, having the ability to alter its shape to the desired result:
CSS Version
Although this is far from complete, you may also be able to generate this shape using CSS.
SVG Version
I should know that SVG should be at the top of this answer, however, I like a challenge and so here is an attempt with SVG.
Altering the
pathvalues, you would be able to alter the shape of your teardrop design.Or if your viewers' font supports it, use the Unicode characters
DROPLET:
I also found this on Codepen made by user Ana Tudor using CSS and the
box-shadowstyle and parametric equations. Very simple, very little code. And many browsers support the CSS3 Box-shadow style: