CSS Battles #9 – Tesseract

[meg-gutshall]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[rmirville]

Acquired the tesseract by teaming up with Loki (512 characters)

<p c></p>
<p b></p>
<p a></p>
<style>
  body {
    display: grid;
    position: relative;
    place-items: center;
    background: #222730;
    margin: 0;
  }
  [b], [c] {
    background: #4CAAB3;
    height: 150px
  }
  p {
    position: absolute;
  }
  [a] {
    background: #393E46;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  [b] {
    width: 150px;
    transform: rotateZ(45deg);
    backface-visibility: hidden;
    border: 50px solid #222730;
  }
  [c] {
    width: 100%;
  }
</style>

[meg-gutshall]

First solution – 603.41 {500}

<div class=lg>
  <div class=sm>
    <div class=c></div>
  </div>
</div>
<style>
  body { background: linear-gradient(#222730 75px, #4CAAB3 0 225px, #222730 0); }
  body, .lg, .sm {
    display: grid;
    place-items: center;
  }
  .lg {
    width: 250px;
    height: 250px;
    background: #222730;
    rotate: 45deg;
  }
  .sm {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
  }
  .c {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 25px;
  }
</style>

Refactored solution using a border – 605.81 {444}

<div id=s><div id=c></div></div>
<style>
  body { background: linear-gradient(#222730 25%, #4CAAB3 25% 75%, #222730 0); }
  body, #s {
    display: grid;
    place-items: center;
  }
  #s {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
    border: 50px solid #222730;
    rotate: 45deg;
    backface-visibility: hidden;
  }
  #c {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 25px;
  }
</style>

Refactored solution using a border (minified) – 621.04 {309}

<div s><div c><style>body{background:linear-gradient(#222730 25%,#4CAAB3 0 75%,#222730 0)}body,[s]{display:grid;place-items:center}[s]{width:150px;height:150px;background:#4CAAB3;border:50px solid#222730;rotate:45deg;backface-visibility:hidden;}[c]{width:50px;height:50px;background:#393E46;border-radius:25px

Solution using border and pseudo element – 604.54 {470}

<div></div>
<style>
  body, div {
    display: grid;
    place-items: center;
    background: linear-gradient(#222730 25%, #4CAAB3 25% 75%, #222730 0);
  }
  div {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
    border: 50px solid #222730;
    rotate: 45deg;
    backface-visibility: hidden;
  }
  div::after {
    display: inline-block;
    content: "";
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 25px;
  }
</style>

Solution using border and pseudo element (minified) – 617.39 {329}

<p><style>body,p{display:grid;place-items:center;background:linear-gradient(#222730 25%,#4CAAB3 0 75%,#222730 0);}p{width:150px;height:150px;background:#4CAAB3;border:50px solid #222730;rotate:45deg;backface-visibility:hidden;}p::after{display: inline-block;content:"";width:50px;height:50px;background:#393E46;border-radius:25px

[aishwarya-mali]

Nested elements 601.43 {591}

<div><p><span></span></p></div>
<style>
  body{
    background: #222730;
    display: grid;
    place-items: center;
    margin: 0;
  }
  div{
    width: 100%;
    height: 150px;
    background: #4CAAB3;
    display: grid;
    place-items: center;
  }
  p {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
    transform: rotate(45deg);
    display: grid;
    place-items: center;
    border: 50px solid #222730;
    position: absolute;
    backface-visibility: hidden;
  }
  span{
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 50%;
  }
</style>

[piotrszymaniec]

Relative positioning, without border, 4 elements – 600.21 {793}

<div id="belt">  
  <div id="buckle">
    <div id="helper">
      <div id="decoration"></div>    
    </div>
  </div>
</div>
<style>
  * {
    margin: 0;
  }
  body {
    background: #222730; 
  }
  div {    
    background: #4CAAB3;
    color: #222730;
  }
  #belt {
    height: 150px;
    margin-top: 75px; 
    padding-left: 60px;
  }
  #buckle {
    position: relative;
    width: 200px;
    height: 200px;
    left: 15;
    top: -50;
    background: #222730;
    rotate: 45deg;
    padding: 25px;
  }
  #helper {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    margin-top: 25px;
    background: #4CAAB3;  
  }
  #decoration {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 100px;
    top: 100px;
    border-radius: 50%;
    background: #393E46;
  }
</style>

[paceaux]

1 HTML element, 3 rulesets – 593.55 (99.7% match) {322 characters}

<p></p><style>*{margin: 0; background: #222730} p{
    color:#393e46;text-align:center;background:#4caab3;font-size:175px;height:50%;margin:75px 0}p::before {display:inline-block;content:'\2022';height:67%;width:25%;padding:25px;line-height:.6;background:inherit;outline:50px solid #222730;transform:rotate(45deg)}</style>

unminified {412 characters}

<p></p>
<style>
  * {margin: 0; background: #222730}
  p {
    color:#393e46;
    text-align:center;
    background:#4caab3;
    font-size:175px;
    height:50%;
    margin:75px 0
    }
  p::before {
    display:inline-block;
    content:'\2022';
    height:67%;
    width:25%;
    padding:25px;
    line-height:.6;
    background:inherit;
    outline:50px solid #222730;
    transform:rotate(45deg)
  }
</style>

[neilitalia]

Styled a single div because I didn't know I could add more divs – 601.53 {584}

<div></div>
<style>
  * {
    margin: 0;
  }
  div {
    width: 100%; height: 300px;
    box-shadow: inset 0 75px 0 #222730, inset 0 -75px 0 #222730;
    background: #4CAAB3;
    position: relative;
  }

  div::before {
    content: '';
    position: absolute;
    top: 75px; left: 125px;
    width: 150px; height: 150px;
    rotate: 45deg;
    background: #4CAAB3;
    box-shadow: 0 0 0 50px #222730;
  }

  div::after {
    content: '';
    position: absolute;
    top: 125px; left: 175px;
    width: 50px; height: 50px;
    background: #393E46;
    border-radius: 50%;
  }
</style>

[paceaux]

restrictions are the best form of creativity!