如何在CSS中创建鼹鼠形状？

Question

我有客户要求在他们网站的标题下方创建一个颠倒的鼹鼠形状。

请参阅下文。我知道你在想什么，“当然，你的油漆技巧是史诗般的，请教我”。我对此的答复是“这些技能无法教授”。

我尝试了几件事来试图让它发挥作用，并且没有成功。

Answer 1

如Paulie_D所述，使用inline SVG制作此形状是微不足道的。在以下示例中，我使用了带有bezier curve commands的路径元素：

svg{
  display:block;
  width:30%;
  margin:0 auto;
}

<svg viewbox="0 0 10 5">
  <path fill="#FF7F27" d="M10 0 C7.5 0 7.5 5 5 5 S2.5 0 0 0z" />
</svg>

在旁注中，您可以看到如何在CSS中对齐双曲线与SVG相比是一件麻烦：CSS - Double curved shape。