< Back to Frontend Friday Folks Index

Lotus

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (393 characters)
1 
<p>
2 
<style>
3 
  *{background:#926927}
4 
  p,p:after,p:before {
5 
    margin:0;
6 
    position:absolute;
7 
    content:'';
8 
    width:100;
9 
    height:100;
10 
    border-radius: 100% 0;
11 
    background:#6D480A;
12 
    transform-origin:0 100%;
13 
    transform:translate(192px, 112px);
14 
  &:after {
15 
    background: #fff;
16 
    transform:translate(0px, 1px) rotate(-45deg);
17 
  }
18 
  &:before {
19 
    transform:rotate(-90deg);
20

No radial gradients here, because it was so much easier to use divs with border radius for this...!

< Back to Frontend Friday Folks Index