CSS 形状像茶滴

Question

我试图创建这个形状（在上传的图片上）只有 css 边框，但我对边角有问题，它们不接受正确的形状。我可以向你们请教如何创建它的建议或最佳实践吗？

这是我的代码

.tea-drop {
  width: 90px;
  height: 25px;
  display: block;
  background: #000;
  border-top-left-radius: 100%;
  border-top-right-radius: 60%;
  border-bottom-left-radius: 70%;
  border-bottom-right-radius: 67%;
}

<div class="tea-drop"></div>

Answer 1

您可以使用 CSS3 来实现。

.tear {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 10em;
  height: 10em;
  border: none;
  -webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgb(0,0,0);
  -webkit-transform: rotateX(42.5447924299deg) rotateY(100deg) rotateZ(-45.26deg)  translateY(1px) ;
  transform: rotateX(42.5447924299deg) rotateY(100deg) rotateZ(-45.26deg)  translateY(1px) ;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
}

<div class="tear"></div>

参考：http://enjoycss.com/SfB

我保存了link，你可以自己定制

Answer 2

SVG 是创建此类形状的推荐方法。它提供简单性和可扩展性。

我们可以使用 SVG 的 path 元素创建一个像上面那样的形状，并用一些纯色、渐变或图案填充它。

只有一个属性 d 用于定义 path 元素中的形状。此属性本身包含许多短命令和这些命令运行所需的几个参数。

以下代码将创建以上形状：

<path d="M 0,0
         C 100,10 120,150 60,75
         Z" />

下面是上面代码中使用的 path 个命令的简要说明：

M命令用于定义起点。它出现在开头并指定绘图的起点。
Q命令用于绘制曲线
Z命令用于关闭当前路径。从当前点到起点绘制一条直线来闭合形状。

输出图像：

工作示例：

* {box-sizing: border-box;}

body {
  background: linear-gradient(teal, skyblue);
  text-align: center;
  min-height: 100vh;
  padding: 10px;
  margin: 0;
}

<svg width="200" height="200" viewBox="0 0 100 100">
  <path d="M0,0
           C 100,10 120,150 60,75
           Z" />
</svg>

这个形状也可以用渐变或图案填充。 <linearGradient> 元素用于定义 SVG 中的渐变。稍后可以使用 id 属性引用此元素来填充或勾勒任何形状。

<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
  <stop offset="0" stop-color="orange" />
  <stop offset="1" stop-color="green" />
</linearGradient>

渐变的方向由x1、y1、x2和y2控制，而<stop>元素用于定义颜色和他们在渐变线上的位置。

输出图像：

工作示例：

* {box-sizing: border-box;}

body {
  background: linear-gradient(teal, skyblue);
  text-align: center;
  min-height: 100vh;
  padding: 10px;
  margin: 0;
}

<svg width="200" height="200" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="orange" />
      <stop offset="1" stop-color="green" />
    </linearGradient>
  </defs>
  <path d="M0,0
           C 100,10 120,150 60,75
           Z" fill="url('#grad')" />
</svg>

我们甚至可以使用 SVG 的滤镜将阴影应用于此形状。 This MDN 上的文章解释了过滤器的基础知识。

输出图像：

工作示例：

* {box-sizing: border-box;}

body {
  background: linear-gradient(teal, skyblue);
  text-align: center;
  min-height: 100vh;
  padding: 10px;
  margin: 0;
}

<svg width="240" height="240" viewBox="0 0 120 120">
  <defs>
    <linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="orange" />
      <stop offset="1" stop-color="green" />
    </linearGradient>
    <filter id="shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <path d="M10,10
           C 110,20 130,160 70,85
           Z" fill="url('#grad')" filter="url('#shadow')" />
</svg>

有用资源：

下面是一些有用的 SVG 链接：

CSS 形状像茶滴

CSS shape something like tea drop

css

css-shapes