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
Chris Bolson16mo 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
Senra16mo 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
Chris Bolson16mo ago
Well done, but your code has nothing to do with the code that @aparawasthi posted.
Senra
Senra16mo ago
yeah Got it. He wants to get a 100% using similar approach that he was trying
Chris Bolson
Chris Bolson16mo ago
I see you got your 100% with a little help from Beo. He knows all the little tricks 😀
AparAwasthi
AparAwasthi16mo ago
Yeah got the solution, Thanks for telling me about cssBattle Discord. 😁
Want results from more Discord servers?
Add your server