This content originally appeared on DEV Community and was authored by Prakhar Tandon
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.
Want to connect?
This content originally appeared on DEV Community and was authored by Prakhar Tandon
Prakhar Tandon | Sciencx (2022-02-11T07:02:46+00:00) CSSBattle Target#2. Retrieved from https://www.scien.cx/2022/02/11/cssbattle-target2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.