Css drawing - Custom nose shape

Question

I'm starting with pure css drawing and animations and I'm stuck at creating the shape of the koala nose.

Koala

I know clip-path can be used to accomplish this, but, how can i make firefox-compatible?.

Answer 1

There's probably a lot of possibilities, but try the border radius

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

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