🔥 CSSBattle May 06 – Clean & Smart Solution!
Solved using pure CSS only — no HTML tricks, no SVG 🚀
This challenge is all about mastering gradients + symmetry
💡 What you’ll learn:
Conic gradients for sharp cuts
Radial gradients for circles
Background layering tricks
Using transform for mirroring
🚀 CSS Code (YouTube safe):
body{
background:#4A9A86;
}
p{
height:200px;
background:
conic-gradient(from 90deg,#4A9A86 25%,transparent 0),
radial-gradient(1q,#173889 35px,transparent),
conic-gradient(#4A9A86 75%,#F3EAD2 0);
margin:-8 142 -100 42;
}
p+p{
scale:-1;
translate:100px;
}
🧠 HTML Hint:
Use two paragraph elements (p p)
💬 Can you reduce the code size even more? Challenge accepted? 😏
👍 Like • Subscribe for daily CSSBattle solutions
#CSSBattle #CSS #Frontend #WebDevelopment #CodingChallenge #LearnCSS
