Css 绘图 - 自定义鼻子形状

Question

我从纯粹的 css 绘图和动画开始，我一直致力于创建考拉鼻子的形状。

Koala

我知道 clip-path 可以用来完成这个，但是，我怎样才能使 firefox 兼容？

Answer 1

可能有很多可能性，但试试边界半径

.nose{
  border-radius:50px 50px 50px 50px / 100px 100px 50px 50px;
  width:70px;
  height:100px;
  background: red;
}

<div class="nose"></div>

Css drawing - Custom nose shape