CSS Battle #9 - Tesseract

The difference between these Series and any from Netflix is that on Netflix you get all episodes at once.
In contrast, I will need to write mine first. One post every three days. At least, that is what I wanted in the beginning. Naïve me.

Did you know there was a CSS Battle Community? Well, in case you didn't, here it is. Try to guess which kind of posts are the most frequent? Missing just a bit to 100%. The struggle is real. Thus, the series. I hope it helps.

The Solution

I need to confess. I didn't manage this one. But I am optimistic. The best I can is good enough.
Let's start with body. We make it striped by using linear-gradient. The first and the last 25% take #222730 and the middle 50% gets #4CAAB3 as a background color. The groundwork is done.

body {
  background: linear-gradient(#222730 25%, #4caab3 25% 75%, #222730 75%);
}

In the middle of the plot, we should have a rhombus. And inside, a circle. Let's mark them up. Note that you may use a p tag inside of a div instead of giving a generic division a kind of semantic meaning by attributing it with an id. After all, a paragraph is also a block element.

<div id="rhombus">
  <div id="circle"></div>
</div>

When it comes to a rhombus, we make a square and give it a size of 150 x 150, nice background color and a border of 50px to make it look cut-out. Then we center it by one of the older methods, using a fixed positioning. Note, that here as well, we could use an absolute positioning relative to its parent, but since body is the parent, fixed will bring us to the same outcome with less hassle. Finally, we also rotate the square to become a rhombus.

#rhombus {
  width: 150px;
  height: 150px;
  background: #4caab3;
  border: 50px solid #222730;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

The last one is the circle. We position it using a margin of 50px. The rest is pretty straight-forward. Size, background, and border radius.

#circle {
  width: 50px;
  height: 50px;
  background: #393e46;
  border-radius: 50px;
  margin: 50px;
}

This is the whole solution.

<div id="rhombus">
  <div id="circle"></div>
</div>

<style>
  body {
    background: linear-gradient(#222730 25%, #4CAAB3 25% 75%, #222730 75%);
  }
  #rhombus {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
    border: 50px solid #222730;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  #circle {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 50px;
    margin: 50px;
  }
</style>

At the time of writing this, and I must admit, I've given up already, I just wanted to search for the name of the term. How would you call this thin line? Apparently, it is called bleeding. And one of the search results was promising to fix the problem. I thought, why not? And you know what? It worked. So, in order to make the code to achieve a full match, just add background-clip: padding-box to the #rhombus. What is this padding-box?

Outtakes

This one is quite funny. The code above will not work in Firefox. In fact, it will look something like this.

The very first, originally bleeding version will be like this.

And here comes the code. Keep in mind this is a non-polished version.

<div><p></p></div>

<style>
  body {
    margin: 0;
    position: relative;
    background: linear-gradient(#222730 25%, #4CAAB3 25% 75%, #222730 75%);
  }
  div {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
    border: 50px solid #222730;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-clip: padding-box;
  }
  p {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 50px;
    margin: 50px;
  }
</style>

By the way, are you enjoying CSS Battle so far? The guys are putting in a lot of work. So, in case you wondered how you can support them, here you go:

I personally find it funny how a light theme is something PRO™
But jokes aside, there are some potentially game-changing features coming like targets created by the Community and own battles. Great stuff if you want to hire a frontend frontend developer or just want to brag about your minifying skills.