cssbattle challenge

how can we create this: https://cssbattle.dev/play/160 my brain stopped working.

12 Replies

You could create a single element (or use the body) with a border-radius of 50% to make the circle. No background and a border of (eg) 20px. Give one of the border sides the different color and finally rotate the element to match.

b1mind•2y ago

Chris Bolson•2y ago

804 chars!! you can get that down a bit 😉

curatorOP•2y ago

can you share the code? even if u can

b1mind•2y ago

I left in the comments and all that 🤣 I closed it I did exactly what Chris had said though 🧠 great minds Tip: start with centering the div, border-radius, size it to match in the "inner" of the circle then add boarders, rotate

curatorOP•2y ago

got it done!

<div class="div--1">
  <span class="span--1"></span>
</div>
<style>
  body {
    background: #62306D;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .div--1 {
    width: 200px;
    height: 200px;
    background: #F7EC7D;
    border-radius: 50%;
    position: relative;
    overflow: hidden
  }
  .span--1 {
    position: absolute;
    background: #E38F66;
    width: 100px;
    height: 100px;
  }
  .div--1::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    scale: 0.6;
    background: #62306D;
    border-radius: 50%;
  }
</style>

<div class="div--1">
  <span class="span--1"></span>
</div>
<style>
  body {
    background: #62306D;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .div--1 {
    width: 200px;
    height: 200px;
    background: #F7EC7D;
    border-radius: 50%;
    position: relative;
    overflow: hidden
  }
  .span--1 {
    position: absolute;
    background: #E38F66;
    width: 100px;
    height: 100px;
  }
  .div--1::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    scale: 0.6;
    background: #62306D;
    border-radius: 50%;
  }
</style>

b1mind•2y ago

Ooh crazy it must save in local host (clicked the link and my code was still there xD)

<div></div>
<style>
  body {
      display: grid;
      place-items: center;
    background: #62306D;
  }
  div { 
    border-radius: 50%;
    border-left: 40px solid #E38F66;
    border-top: 40px solid #F7EC7D;
    border-right:40px solid #F7EC7D;
    border-bottom: 40px solid #F7EC7D;
    width: 120px;
    height: 120px;
    transform: rotate(45deg)
  }

<div></div>
<style>
  body {
      display: grid;
      place-items: center;
    background: #62306D;
  }
  div { 
    border-radius: 50%;
    border-left: 40px solid #E38F66;
    border-top: 40px solid #F7EC7D;
    border-right:40px solid #F7EC7D;
    border-bottom: 40px solid #F7EC7D;
    width: 120px;
    height: 120px;
    transform: rotate(45deg)
  }

is what we were saying

curatorOP•2y ago

yours is 99.9% match mine's 100% 😂

b1mind•2y ago

says 100% for me 😉

b1mind•2y ago

if its being funny its just cause Grid and I hate CSSbattles for it... could change body to flexbox and probalby work

Chris Bolson•2y ago

this is close to what I did:

<p>
<style>
body{
  background:#62306D
}
p{
  padding:60;
  border:43px solid #F7EC7D;
  border-radius:50%;
  border-left-color:#E38F66;
  rotate:45deg;
  margin:50 92
}

<p>
<style>
body{
  background:#62306D
}
p{
  padding:60;
  border:43px solid #F7EC7D;
  border-radius:50%;
  border-left-color:#E38F66;
  rotate:45deg;
  margin:50 92
}

curatorOP•2y ago

great work mate!

Gaming

Programming

cssbattle challenge

Did you find this page helpful?