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>
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?
Top comments (5)
You should look into conic gradients :)
I will.
I even have a book by Lea Verou!
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>
My simple solution
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...