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

Chris Bolson•16mo ago

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

curatorOP•16mo ago

can you share the code? even if u can

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

yours is 99.9% match mine's 100% 😂

b1mind•16mo ago

says 100% for me 😉

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

great work mate!

Gaming

Programming

cssbattle challenge