Kevin Powell - Community•12mo 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•12mo 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.

Satya•12mo ago

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

Chris Bolson•12mo 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
}

Satya•12mo ago

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

Chris Bolson•12mo ago

I can try….

Satya•12mo ago

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

Satya•12mo 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•12mo 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)

Satya•12mo ago

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

Chris Bolson•12mo ago

https://discord.gg/zKzzy7uvmr

Gaming

Programming

CSS Battle Leafy Trail