7
\$\begingroup\$

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.

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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

\$\endgroup\$
1
  • \$\begingroup\$ I've already done all of those as you could see in my minified version. Unfortunately I cannot use 3 digit hex color cause the leaf color is #d9d9d9. Also I guess I shouldn't use style here cause I share styles between 3 p tags \$\endgroup\$
    – j-0-n-e-z
    Mar 20, 2023 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.