CSS Battle #6 - Missing Slice

Now that I am a Frontend Developer™, I visit Berlin.JS. Last time I was there, Cassie Evans gave a wonderful talk on animations using SVG.

Cassie Evans

@cassiecodes

Speaking @berlinjs was a treat.

💜 I was very inspired by the organisers drive to encourage and support new speakers. Taking some tips home to @CodebarBrighton with me.

🙊 My slides are still a WIP but if you’d like them let me know and I’ll pop you a sneaky private link. 😉

12:42 PM - 21 Jun 2019

So I thought to myself, "why not?" Apart from that, Cassie told me to use SVG, because divs were never meant to be used for drawing, SVG was. Besides that, you still need to style SVG.
Not that fast. CSS Battle doesn't allow SVGs.
Sad.
Let's solve number six the usual way.

1. Padding

Three divs, squeezed together to avoid a hack like font-size: 0, are placed in the middle of the content using paddings. Inline-blocking does the trick. We could as well used margins (that's actually how I did initially), but this time we will not.

<div id="a"></div><div id="b"></div><div id="c">
</div>
<style>
  body {
    padding: 42px 92px;
    background: #E3516E;
  }
  div {
    width: 100px;
    height: 100px;
    display: inline-block;
  }
  #a {
    background: #51B5A9;
    border-radius: 100px 0 0;
  }
  #b {
    background: #FADE8B;
    border-radius: 0 100px 0 0;
  }
  #c {
    background: #F7F3D7;
    border-radius: 0 0 0 100px;
  }
</style>

2. Transformations

But do we really need that much HTML markup? After all, this is CSS Battle. So, let's at least try to reduce the character count. We know, that a div can have a border radius to make it round. We also know that we can selectively modify each of the border sides. And that the border will replicate the side shape. So, we can make a circle, with four different colored borders. But the circle itself, we actually don't need it. What if we don't define it? So, a division of no height or width. This might work.
If you tried to that, you may notice, that the colors are not exactly turned the way we'd need. Well, here is where transform: rotate(45deg) comes in play. I just looked at possible units for rotation, just in case we win some more characters: deg, rad, grad and turn. But we don't.
When it comes to the border colors, your eyes might stumble upon something odd.
#0000, what art thou?
Initially, I wanted to make that part transparent. rgba(0, 0, 0, 0) is the solution. 16 freaking characters! Can't we do better? Sure, try transparent. It also works. But still long though. What about #00000000, where that 00 stands for opacity: 0? Much nicer! But it turns out that [4 character RGBA is supported too][4]!

<div></div>
<style>
* {
  background: #E3516E;
}

div {
  margin: 50px 92px;
  border-radius: 100px;
  border: 100px solid;
  border-color: #FADE8B #0000 #F7F3D7 #51B5A9;
  transform: rotate(45deg);
}
</style>

This is the first post, where I try to reduce the number of characters. Do not try to do this at home!
Anyways, which one of these solutions would you prefer? Do you know any others?