Is there any less code way to make a leaf (eye) shape in CSS?

Question

I'm trying to solve a CSS challenge. It contains a rotated leaf shape (looks like an eye). Score for the challenge depends on amount of characters of the code. Here's my way to make a leaf shape:

div {
  width: 200px;
  height: 200px;
  border-radius: 99% 0;
  rotate: 45deg;
  background: #d9d9d9;
}

<div></div>

Here's my whole solution for the challenge if you need a bigger picture:

* {
  background:#E3516E;
}
p {
  height:99px;
  width:99px;
  background:#d9d9d9;
  border-radius:0 0 81q;
  margin:-31px;
}
[i] {
  rotate:45deg;
  margin:55px 142px;
  border-radius:99%0;
}
p+p {
  margin:-30px 316px;
  scale:-1;
}

<p><p i><p>

Minified version of the above:

<p><p i><p><style>*{background:#E3516E}p{height:99;width:99;background:#d9d9d9;border-radius:0 0 81q;margin:-31}[i]{margin:55 142;rotate:45deg;border-radius:99%0}p+p{margin:-30 316;scale:-1

Is there any way with less code for the eye shape? Maybe with clip-path, borders or something like that? Please help.

Answer 1

77 bytes

<p style=width:5em;height:5em;border-radius:99%0;rotate:45deg;background:#080

<p style=width:5em;height:5em;border-radius:99%0;rotate:45deg;background:#080

• Use a p tag instead of a div
• Omit the closing >
• Remove all white space within the CSS
• Use an inline style attribute
• Use em instead of px for units of measurement
• Use 3 digit hex colours instead of named colours
• Omit the last ;

You can save another byte using 4rad in place of 45deg, but the angle won't be exactly right:

<p style=width:5em;height:5em;border-radius:99%0;rotate:4rad;background:#080