DEV Community

Cover image for CSS Battle #6 - Missing Slice
Olzhas Askar
Olzhas Askar

Posted on

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.

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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?

Top comments (5)

Collapse
 
chinchang profile image
Kushagra Gour

You should look into conic gradients :)

Collapse
 
pheeria profile image
Olzhas Askar

I will.
I even have a book by Lea Verou!

Collapse
 
andrewgillitzer profile image
AndrewGillitzer

That's exactly how I solved css battle #6-missing slice-

<br> *{background:#E3516E;margin:25 auto;}<br> p{width:200;<br> height:200;<br> border-radius:50%;<br> background:conic-gradient(#FADE8B 0% 25%,#E3516E 25% 50%,#F7F3D7 50% 75%,</p> <h1> <a name="51b5a9-75-100" href="#51b5a9-75-100" class="anchor"> </a> 51B5A9 75% 100%); </h1>

Collapse
 
kiranojhanp profile image
kiranojhanp • Edited

My simple solution

<div class="wrap"><div></div></div>
<style>
  body {
    background: #E3516E;
    display: grid;
    place-items: center;
    height: 95%;
  }
  .wrap {
    width: 200px;
    height: 200px;
    background: #E3516E;
    clip-path: circle(50%);
  }
  .wrap>div,.wrap>div:before,.wrap>div:after {
    position: absolute;
    height: 100px;
    aspect-ratio: 1;
    content: '';
  }

  .wrap>div {
    background: #51B5A9;
  }

  .wrap>div:before {
    background: #FADE8B;
    margin-left: 100px;
  }

   .wrap>div:after {
    background: #F7F3D7;
    margin-top: 100px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
anfarius profile image
Kacper Kaczmarzyk • Edited

I know this was posted a long time ago but I love following it after I tried my hand at doing the battles myself. I learn something with each one. Here's mine, using an overflow: hidden div as a boundary for a square div with box shadows.

dev-to-uploads.s3.amazonaws.com/up...