Question

我正在尝试仅使用css边框创建此形状（在上传的图像上），但我对角落有问题，他们不接受正确的形状。我可以请教各位建议或最佳实践如何创建它？

这是我的代码

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用CSS3来实现这一点。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

我保存了链接，您可以自己定制。

Answer 2

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

我们可以使用SVG＆＃39; path元素创建上面的形状，并用一些纯色，渐变或图案填充它。

只有一个属性d用于定义path元素中的形状。该属性本身包含许多短命令和很少的参数，这些命令是这些命令工作所必需的。

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

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

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

M命令用于定义起点。它出现在开头，并指定绘图应该从哪里开始。
Q命令用于绘制曲线。
Z命令用于关闭当前路径。它从当前点到起点绘制一条直线以关闭形状。

输出图片：

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

这种形状也可以用渐变或图案填充。 <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>元素用于定义颜色及其位置沿着渐变线。

输出图片：

工作示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

输出图片：

工作示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

有用的资源：

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

CSS形状像茶滴

2 个答案: