Hey everyone,
This article is over the Target#2 on CSSBattle
The first approach I could come up with uses linear gradient to produce the required result.
<style>
*{background:#62374e}
body{margin:50;
background:linear-gradient(
to right,
#fdc57b00 50px,#62374e 50px,
#62374e 250px,#fdc57b00 250px),
linear-gradient(
to bottom,
#fdc57b 50px,#62374e 50px,
#62374e 150px,#fdc57b 150px)
This condenses down to 220 characters after removing white spaces.
If you want to learn more about linear gradients, you can refer to MDN over here.
The next approach is stated below
<p></p>
<p id="a">
</p><p style="right:0">
</p><p style="bottom:0"></p>
<style>
*{margin:0;background:#62374e}
#a{right:0;bottom:0}
p{margin:50;
width:50;height:50;
background:#fdc57b;
position:fixed
This one was by far, my shortest solution condensing to 192 characters.
The code is quite self explanatory.
Although the top solution was just 69 characters, I wonder how they were able to do it in such small amount of code!
Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.
Top comments (2)
By using css grid? I am a noob in web development but I think may be css grid can do or not, i don't know.
Yeah sure, we can also do the same with CSS grids.
Here's the code:
Cheers Sam!