如何在 CSS 中创建鼹鼠形状？ [关闭]

Posted 2023-03-06

【中文标题】如何在 CSS 中创建鼹鼠形状？ [关闭]

【英文标题】：How to create molehill shape in CSS? [closed]

【发布时间】：2016-07-27 01:02:23

【问题描述】：

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

请见下文。我知道你在想什么，“老兄，你的绘画技巧太棒了，请教我”。我对此的回答是“这些技能是无法教授的”。

我已经尝试了几件事来试图让它发挥作用，但都没有成功。

【问题讨论】：

该死，看看那个抗锯齿！在另一个不相关的话题上，您能否向我们提供您必须尝试这样的壮举的任何代码？这肯定会帮助我们为您提供帮助。

到目前为止，您到底尝试了什么？什么没用？添加背景图片？！

提问前先阅读所需材料。显示您已经尝试过的@Pierre 已经提到的内容。您需要的是 CSS 掩码。网上有很多教程，例如：html5rocks.com/en/tutorials/masking/adobe。尝试但仍然失败后，显示为您的代码。在那之后，人们会提供帮助！

SVG 将是最佳方法。用最少的 HTML / CSS 简单地制作内部曲线是相当困难的。

离题：它看起来像一个......像一个..我的意思是：P离开它..：p

【参考方案1】：

正如Paulie_D 提到的，用inline SVG 制作这个形状是微不足道的。在以下示例中，我使用了带有 2 个 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>

顺便说一句，您可以在这里看到与 SVG 相比，在 CSS 中对齐双曲线是多么麻烦：CSS - Double curved shape。