< Back to Frontend Friday Folks Index

Tesseract

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (978 characters)
1 
<div class="bg-rect"></div>
2 
<div class="border-rect"></div>
3 
<div class="inner-rect"></div>
4 
<div class="circle"></div>
5 
<style>
6 
  body {
7 
    background: #222730;
8 
    margin: 0;
9 
    padding: 0;
10 
  }
11 
  .bg-rect {
12 
    background: #4CAAB3;
13 
    position: absolute;
14 
    top: 25%;
15 
    bottom: 25%;
16 
    left: 0;
17 
    right: 0;
18 
  }
19 
  .border-rect {
20 
    position: absolute;
21 
    background: #222730;
22 
    transform: rotate(45deg);
23 
    top: calc(50% - calc(50vh + 100px) / 2);
24 
    left: calc(50% - calc(50vh + 100px) / 2);
25 
    height: calc(50vh + 100px);
26 
    width: calc(50vh + 100px);
27 
  }
28 
  .inner-rect {
29 
    position: absolute;
30 
    background: #4CAAB3;
31 
    transform: rotate(45deg);
32 
    top: 25%;
33 
    left: calc(50% - 50vh / 2);
34 
    height: 50vh;
35 
    width: 50vh;
36 
  }
37 
  .circle {
38 
    position: absolute;
39 
    background: #393E46;
40 
    border-radius: 50%;
41 
    transform: rotate(45deg);
42 
    top: calc(50% - 50px / 2);
43 
    left: calc(50% - 50px / 2);
44 
    height: 50px;
45 
    width: 50px;
46 
  }
47 
</style>
The solution I found in CSSBattle.dev shows a very long thing. I think I should do this again with just one element and a background. Let's see how this works out!
Highlighted solution (199 characters)
1 
<p><style>&{background:linear-gradient(#222730 75px,#4CAAB3 0 225px,#222730 0)}p{position:fixed;inset:9px 75px;border:solid+50px#222730;rotate:45deg;background:radial-gradient(1q,#393E46 25px,#4CAAB3
Okay, I had to try to come up with another one for this. A lot smaller and using a gradient for the circle. This looks way better to me, even though I code golfed a bit obviously and wouldn't like to use this in production, with the body background and the inset positioning...
< Back to Frontend Friday Folks Index