How to create molehill shape in CSS?

Question

I have a customer request to create an upside-down molehill shape underneath the header on their website.

Please see below. And I know what you're thinking, "Dang man, your paint skills are epic, please teach me". My reply to that would be "these skills can't be taught".

I have tried several things to try to get this to work, and have not been successful.

Dang, check out that anti-aliasing! On another unrelated topic, could you provide us with any code you have to attempt such a feat? That would definitely help us assist you. — chazsolo, Apr 06 '16 at 14:37
What have you tried so far exactly ? What didn't work ? Adding a background image ?! — Pierre, Apr 06 '16 at 14:39
First read into needed material before asking questions. Show what you have tried as @Pierre already mentioned. What you need is CSS masking. There are plenty of tutorials at the internet, eg: http://www.html5rocks.com/en/tutorials/masking/adobe/. After trying and still failing, show as your code. After that, people will help! — Jacob van Lingen, Apr 06 '16 at 14:47
SVG would be the optimal method. The inner curves are quite difficult to make simply with minimal HTML / CSS. — Paulie_D, Apr 06 '16 at 15:06
off-topic: it looks like a... like a.. I mean :P leave it.. :p — Gogol, Apr 06 '16 at 15:30

score 3 · Answer 1 · edited May 23 '17 at 11:48

As Paulie_D mentioned, making this shape with an inline SVG is trivial. In the following example, I used a path element with 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>

On a side note, you can see here how aligning double curves in CSS is a hassle compared to SVG: CSS - Double curved shape.

How to create molehill shape in CSS?

1 Answers1