Kevin Powell - Community•2y ago

CSS Battle Leafy Trail

Hey all! I was trying to solve the Leafy Trail challenge in CSS Battle. I was wondering if we could solve it using only one div and a linear gradient. I'm having a little trouble figuring out how to set the angles in the linear gradient (or if it is even possible). Here's my code:

<div></div>
<style>
  body{
    margin: 0;
    background: #0B2429;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div{
    border: 1px solid white;
    height: 150px;
    width: 250px;
    border-radius: 100px 0;
    background-image: linear-gradient(135deg, #1A4341, #1A4341 40%, #998235, #998235 40%, #F3AC3C)
  }
</style>

<div></div>
<style>
  body{
    margin: 0;
    background: #0B2429;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div{
    border: 1px solid white;
    height: 150px;
    width: 250px;
    border-radius: 100px 0;
    background-image: linear-gradient(135deg, #1A4341, #1A4341 40%, #998235, #998235 40%, #F3AC3C)
  }
</style>

10 Replies

Chris Bolson•2y ago

You would probably need to look at radial-gradient but without spending time playing with it I don’t know if it would be possible. I just used box-shadow for that one (#7 if anyone is searching for it) as it seemed like the simplest solution.

SatyaOP•2y ago

I was thinking about radial too. I'll play around and see. Can you please post your box-shadow solution too?

Chris Bolson•2y ago

<p>
<style>
body{
    background: #0B2429
}
p{
    margin: 75px 167px;
    width: 150px;
    height: 150px;
    background: #F3AC3C;
    border-radius: 67% 0 67% 0;
    box-shadow: 
        -50px 0 #998235,
        -100px 0 #1A4341
}

<p>
<style>
body{
    background: #0B2429
}
p{
    margin: 75px 167px;
    width: 150px;
    height: 150px;
    background: #F3AC3C;
    border-radius: 67% 0 67% 0;
    box-shadow: 
        -50px 0 #998235,
        -100px 0 #1A4341
}

SatyaOP•2y ago

Hi @Chris , could you please help me out with another thing?

Chris Bolson•2y ago

I can try….

SatyaOP•2y ago

Can you tell me why am I getting this faint line?

SatyaOP•2y ago

<style>
  body{
    margin: 0;
    background: #62306D;
  }
  #main{
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: 50;
  }
  #main div[i]:nth-child(odd){
    height: 150;
    width: 100;
  }
  #main div[i]:nth-child(2){
    height: 250;
    width: 100;
  }
  #main div[i]{
    border-radius: 50px 50px 0 0;
    background: #F7EC7D;
  }
  .s{
    height: 60;
    width: 60;
    background: #E38F66;
    border-radius: 100%;
    border: 20px solid #AA445F}
  .m{
    height: 60;
    width: 60;
    background: #AA445F;
    border-radius: 100%;
    border: 20px solid #E38F66;
  }
</style>
<div id="main">
  <div i><div class="s"></div></div>
  <div i>
    <div class="m"></div>
  </div>
  <div i>
    <div class="s"></div>
  </div>
</div>

<style>
  body{
    margin: 0;
    background: #62306D;
  }
  #main{
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: 50;
  }
  #main div[i]:nth-child(odd){
    height: 150;
    width: 100;
  }
  #main div[i]:nth-child(2){
    height: 250;
    width: 100;
  }
  #main div[i]{
    border-radius: 50px 50px 0 0;
    background: #F7EC7D;
  }
  .s{
    height: 60;
    width: 60;
    background: #E38F66;
    border-radius: 100%;
    border: 20px solid #AA445F}
  .m{
    height: 60;
    width: 60;
    background: #AA445F;
    border-radius: 100%;
    border: 20px solid #E38F66;
  }
</style>
<div id="main">
  <div i><div class="s"></div></div>
  <div i>
    <div class="m"></div>
  </div>
  <div i>
    <div class="s"></div>
  </div>
</div>

Chris Bolson•2y ago

I’ll take a look later It might be worth you joining the cssbattle discord. Some of these things are just quirks of the platform and more often than not don’t affect the result (in terms of the battle)

SatyaOP•2y ago

Yeah I got a 100% match but still kinda bugs me Thank you!

Chris Bolson•2y ago

https://discord.gg/zKzzy7uvmr

Gaming

Programming

CSS Battle Leafy Trail