DEV Community

Prakhar Tandon
Prakhar Tandon

Posted on

Target#5 CSS Battle

Hey guys👋,
I am back with the CSSBattle Series✨!

This article is for Target#5 "Acid Rain" on CSSBattle

Target5 Acid Rain

The best approach I could come up till now is stated below.

<p id="a"><p><p id="b">
<style>
body{margin:74 20;background:#0B2429;
display:flex}
p{
width:120;height:120;
background:#998235;
border-radius:50% 0 50% 50%}
#a,#b{
background:#F3AC3C;
transform:translate(60px,60px)}
#b{
transform:translate(-60px,-60px) rotate(180deg);z-index:-1
Enter fullscreen mode Exit fullscreen mode

This was my shortest solution condensing to 267 characters.

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

Discussion (0)