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•15mo ago

Chris Bolson•15mo ago

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

curatorOP•15mo ago

can you share the code? even if u can

b1mind•15mo 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•15mo 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•15mo 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•15mo ago

yours is 99.9% match mine's 100% 😂

b1mind•15mo ago

says 100% for me 😉

b1mind•15mo 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•15mo 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•15mo ago

great work mate!

Gaming

Programming

cssbattle challenge