CSS Battle #9 - Tesseract
Tags: html, css, webdev, tutorial
Published: 2019-07-15 15:31:25

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.][1] 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.][2]
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.

```css
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.

```css
<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][3]. 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.

```css
#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.

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

This is the whole solution.

```css
<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][4] 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][5]?

### Outtakes

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

![Stripes](https://thepracticaldev.s3.amazonaws.com/i/q1dsz809b5xajr2s7rgd.png)

The very first, _originally bleeding_ version will be like this.

![White](https://thepracticaldev.s3.amazonaws.com/i/rtxlu4n3rjkagtyo04j4.png)

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

```css
<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:

{% twitter 1149229650809430016 %}

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][7] or just want to brag about your minifying skills.

[1]: https://spectrum.chat/css-battle/
[2]: https://www.youtube.com/watch?v=COUaNmm53VA
[3]: https://learnlayout.com/position.html
[4]: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
[5]: https://lmgtfy.com/?q=padding%20box&s=g
[6]: https://cssbattle.dev/play/9
[7]: https://css-tricks.com/the-great-divide/