CSSBattle Target#2

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?

You can connect with me here

Comments

[Sam99]

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.

[Prakhar Tandon]

Yeah sure, we can also do the same with CSS grids.
Here's the code:

<div id="cont"><p id="i1"><p id="i2"><p id="i3"><p id="i4">
<style>
*{background:#62374e;margin:0}
#cont{
display:grid;
grid-template-columns:repeat(9,50px);
grid-template-rows:repeat(7,50px)
}
p{background:#fdc57b}
#i1{grid-area:2/2/3/3}
#i2{grid-area:2/7/3/8}
#i3{grid-area:5/2/6/3}
#i4{grid-area:5/7/6/8}

Cheers Sam!