相关疑难解决方法(0)

如何创建这样的形状以显示在网页上？

我不想使用图像,因为它们会在缩放时变得模糊

我试过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>

结果真是搞砸了.

然后我尝试使用SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

它确实得到了形状,但底部没有弯曲.

有没有办法创建这个形状,以便它可以在HTML页面中使用？

我正在使用CSS3来构建随机形状.我被困在这个蛋形状上.我检查了蛋形的数学,它由2个不同半径的圆组成.但是我不能将这个基本结构与这里的CSS构建代码联系起来,特别是"border-radius"部分.

#egg {
display:block;
width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
height:180px;
background-color:green;

/* beware that Safari needs actual
px for border radius (bug) */
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
 }