When it comes to CSS, I'm still back in the 00s. Have you seen Stack Overflow on the 1st of April? Or do you remember MySpace? Glitter and poisonous colors? Well, that is my level. I'd be even using <blink></blink> were I that old. So, when I discovered CSS Battle, I thought I should take it beyond the battle.
I should have fundamentally got better at CSS. Bootstrap based pages were published. New JS frameworks appeared.
But I didn't. Yet.
1. Initial Solution
This is how I've made the last battle to the 100% point. The main idea here is using pseudo classes to make rounded ends.
<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
body{
background: #F5D6B4;
margin: 0;
position: relative;
}
#l, #r, #c{
width: 60px;
height: 30px;
border: 20px solid #D86F45;
position: absolute;
top: 50%;
left: 50%;
}
#l, #r{
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top: 0;
}
#l{
margin: 0 0 0 -130px;
}
#r{
margin: 0 0 0 30px;
}
#c{
margin: -50px 0 0 -50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom: 0;
}
#l:before, #r:after{
content: "";
width: 20px;
height: 10px;
position: absolute;
background: #D86F45;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
top: -10px;
}
#l:before{
left: -20px;
}
#r:after{
left: 60px;
}
</style>
2. Borders
Let's unify all borders to be single border-radius with four values.
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
This becomes a single value.
border-radius: 0 0 50px 50px;
3. Positioning
We can position everyhing as fixed, remove top and left properties which had 50% and replace them with more precise margins.
<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
*{
background: #F5D6B4;
position: fixed;
}
#l, #r, #c{
width: 60px;
height: 30px;
border: 20px solid #D86F45;
}
#l, #r{
border-radius: 0 0 50px 50px;
border-top: 0;
}
#l{
margin: 142px 0 0 62px;
}
#r{
margin: 142px 0 0 222px;
}
#c{
margin: 92px 0 0 142px;
border-radius: 50px 50px 0 0;
border-bottom: 0;
}
#l:before, #r:after{
content: "";
width: 20px;
height: 10px;
position: absolute;
background: #D86F45;
border-radius: 20px 20px 0 0;
top: -10px;
}
#l:before{
left: -20px;
}
#r:after{
left: 60px;
}
</style>
At this point I can probably leave it for you. You know what to do. I hope you enjoyed as I did. I learned a ton of CSS, which I am using in daily work. The whole point was learn together. And since the content I've found online usually only scratches the surface, I decided to contribute myself.
When it comes to the competitive part of it, you can ask others, lint your code and minify it. But I'd rather recommend to watch a positioning tutorial. And of course, never forget - less is more.
And this is it.
Currently I am 72nd out 21780 people who played the game. I solved 37 out 44 battles. My handle is @pheeria.
See you later, I guess?
Top comments (2)
I love the line that you said, "The whole point was to learn together"
The battles show your hard work. Best of luck with your future work.
I think, you must check that link url-decode.com/cat/ that link has several tools, that might help you.
Regards
Hi. Here is my solution with 444 characters.