< Back to Frontend Friday Folks Index

Summit

Highlighted solution (342 characters)
1 
<div></div>
2 
<style>
3 
  body{display:grid;place-items:center;background:conic-gradient(#0000 0 135deg,#4F77FF 0 225deg,#0000 0) 0 9px no-repeat,#191919}
4 
  div{
5 
    background: conic-gradient(at 50% 110px, #F9E492 0 135deg, #191919 0 225deg, #F9E492 0) no-repeat,#191919;
6 
    border-radius:50%;
7 
    height:200px;
8 
    width:200px;
9 
    }
10 
</style>
11
This time, we had to be quick. There is not much to say about it, but I didn't get to 100% until I moved the gradients into two different parts (body and div). Meg made this work before me and gave me the hint to split it. I liked the use of at 50% 110px part to set the gradient center point for conic gradients...!
< Back to Frontend Friday Folks Index