< Back to Frontend Friday Folks Index

Missing Slice

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 (147 characters)
1 
<style>*>*{background:conic-gradient(#FADE8B 25%,#e3516e 0 50%,#F7F3D7 0 75%,#51B5A9 0);margin:-150-100;border:50vw solid #e3516e;border-radius:50%
First solution is regular gradients. Didn't see a good way to make this smaller.
Highlighted solution (126 characters)
1 
<style>*{background:#E3516E;*{background:conic-gradient(#FADE8B 25%,#0000 0 50%,#F7F3D7 0 75%,#51B5A9 0);clip-path:circle(25vw
Using CSS nesting allowed to have 2 chars less than the previous solution that Dan provided. Still remarkable how using background twice is necessary but makes it smaller than the first solution!
< Back to Frontend Friday Folks Index