Today's CSS Battle

99.9% match 😅 Does anyone has some suggestions?

<body style="background:linear-gradient(-45deg, #0000 13.96em,#4F77FF 0 14.55em,#0000 0 15.2em,#4F77FF 0 15.8em,#0000 0 16.4em,#4F77FF 0 17.02em,#0000 0),radial-gradient(circle at 50%,#FFF 5em,#0000 0)#4F77FF">

<body style="background:linear-gradient(-45deg, #0000 13.96em,#4F77FF 0 14.55em,#0000 0 15.2em,#4F77FF 0 15.8em,#0000 0 16.4em,#4F77FF 0 17.02em,#0000 0),radial-gradient(circle at 50%,#FFF 5em,#0000 0)#4F77FF">

6 Replies

Chris Bolson•17mo ago

You might be better off asking on the cssbattle discord - they are having issues with the 99.9% results at the moment (though they say that they have pushed a fix for it a short while ago). For todays challenge somebody has suggested that it requires a radial-gradient offset but I have not been able to fix your one with an offset - maybe I just haven't found the magic number.

Senra•17mo ago

got a 100% match here

<div class='circle'>
<div class='lines'></div>
  
</div>
<style>
  body {
    background: #4F77FF;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div.circle {
    background: #FFFFFF;
    border: none;
    height: 160px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
  }
  div.lines {
    position:absolute;
    height: 10;
    left: 2.5rem;
    width: 20rem;
    background: #4F77FF;
    transform: rotate(-.125turn);
  }
  div.lines:before {
    content: '';
    position:absolute;
    height: 10;
    width: 20rem;
    background: #4F77FF;
    transform: translateY(-200%);
  }
  div.lines:after {
    content: '';
    position:absolute;
    height: 10;
    width: 20rem;
    background: #4F77FF;
    transform: translateY(200%);
  }
</style>

<div class='circle'>
<div class='lines'></div>
  
</div>
<style>
  body {
    background: #4F77FF;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div.circle {
    background: #FFFFFF;
    border: none;
    height: 160px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
  }
  div.lines {
    position:absolute;
    height: 10;
    left: 2.5rem;
    width: 20rem;
    background: #4F77FF;
    transform: rotate(-.125turn);
  }
  div.lines:before {
    content: '';
    position:absolute;
    height: 10;
    width: 20rem;
    background: #4F77FF;
    transform: translateY(-200%);
  }
  div.lines:after {
    content: '';
    position:absolute;
    height: 10;
    width: 20rem;
    background: #4F77FF;
    transform: translateY(200%);
  }
</style>

but yeah. lines are more

Chris Bolson•17mo ago

Well done, but your code has nothing to do with the code that @aparawasthi posted.

Senra•17mo ago

yeah Got it. He wants to get a 100% using similar approach that he was trying

Chris Bolson•17mo ago

I see you got your 100% with a little help from Beo. He knows all the little tricks 😀

AparAwasthiOP•17mo ago

Yeah got the solution, Thanks for telling me about cssBattle Discord. 😁

Gaming

Programming

Today's CSS Battle