CSS Battle Solutions

Thoughts

• With these solutions, you should get close to the Top 100 when you incorporate all the optimized open solutions.
• I don't care about the leaderboard, as I knew I didn't want to dedicate the time necessary to be in the top 50.
• If you look at the pro users, you can see how many times they verify solutions, and the attempts can be quite high for most of the top scorers.
• The daily CSS battle is good for engagement, but it is tough to keep up with, and I try to limit the time I spend to 15 minutes max. This can create problems when some daily battles are too difficult for such a time limit. Also, I avoid trying newer techniques to just get the battle done as quickly as possible.
• I feel like the harder main battles typically require 30-45 minutes to achieve 100%.
• The best solutions from the earliest battles relied on clip-path and unicode. I feel gradient properties have become the preferred approach to achieve a top solution. Also, border and box-shadow can be important to duplicate items.
• CSS Nesting is pretty much required for the best solutions.
• Using clip-path for triangles is a gamble and can be time-consuming to adjust.
• There have been a few battles that were unsolvable. Abstract Plate seemed impossible to solve, and it appears to have been adjusted (or someone posted a solution). The design of Negative Box was changed to allow easier completion. A daily battle was unsolvable, and they adjusted the stats so 100% completion for daily battles was retained for eligible users.
• It is important to note that the battles are designed in Figma. The creators can't verify all battles are solvable ahead of time.
• To get the best solutions, you need to incorporate tools and use generators and online editors. AI is not much help to CSS golfing.
• You need to use the Chrome browser to ensure accurate verification. Even then, the preview is slightly off, and it can be helpful to use the CSS Battle Previewer 2.0 to improve your solution. However, the previewer is only updated for the main battles.

Useful Resources

• CSS Battle
• CSS Battle Previewer 2.0
• Github - CSS Battle Forum
• Github - clip path generator
• Github - SVG path editor
• CSS Tricks - shapes of CSS
• Shark Coder - CSS shapes
• Paulund - CSS shapes
• Stack Overflow - circle inside another circle
• Stack Overflow - teardrop
• Stack Overflow - intersection color in venn diagram
• CSS Portal - clip path generator
• Stack Overflow - CSS chevron
• Stack Overflow - CSS triangle whole width fixed height
• Coding Dude - CSS triangle
• YouTube - Create Slanted or Razor-Blade Div Shapes with CSS3
• RipTutorial - 3D cube
• Codepen - 3D rectangle shape
• Stack Overflow - half circle with css border
• CSS Tricks - make a curved line
• JS Fiddle - CSS checkmark
• Codepen - CSS checkmark
• Stack Overflow - Parallelograms
• Stack Overflow - Oval
• W3 Schools - Pill button
• Stack Overflow - CSS inset borders
• Stack Overflow - L shaped border
• CSS Tricks - Multiple borders
• Geeks for Geeks - semi circle
• Stack Overflow - CSS u shaped or curved borders
• Codepen- Cylinder
• Stack Overflow - smile horseshoe
• Stack Overflow - cut a circle in half
• Stack Overflow - how to bend a div in CSS
• Codepen - eye shape
• 1-notes - CSS swirl design
• Dev.to - CSS only outlined triangle
• CSS.gg - shape-triangle
• Coding Dude - create a triangle
• HashNode - how to make a moon with CSS
• Toptal - CSS minifier
• Unused CSS - CSS half circle
• Stack Overflow - how to make circles repeat in the background of an element
• Stack Exchange - eye shape in CSS
• CSS Tricks - play and pause css animations
• W3 Schools - CSS loader
• Stack Overflow - CSS border shorthand when each border has a different width
• Codepen - CSS alphabet
• Blog - pure CSS lettering a bad and fun idea
• CSS Tricks - building progress ring quickly
• YouTube - How To Make Circular Progress Bar Using HTML CSS JavaScript | Neomorphism Progress Bar
• Blog - circle progress bar CSS
• Github - SVG circle progress generator
• Stack Overflow - HTML5 CSS3 circle with partial border
• Stack Overflow - squiggly line
• singhak - quarter circle with CSS
• Stack Overflow - create a two color circle
• Stack Overflow - draw a curve with CSS
• Abobe - image gradient
• Colorzilla - gradient editor
• JS Fiddle - CSS alphabet
• Stack Overflow - curved line CSS rounded border
• Stack Overflow - CSS curved line
• YouTube - CSS triangle with border - Shape | web zone
• Dev.to - drawing a triangle with CSS
• Stack Overflow - how to create a transparent triangle with border using CSS
• Stack Overflow - element with border radius inside element with border radius is not consistent
• Stack Overflow - draw diagonal lines in div background with CSS
• Medium - HTML CSS how to split a background into 2 colors
• LogRocket Blog - yin yang symbol pure CSS
• Codepen - how to create yin yang symbol pure CSS
• Blog - drawing a triangle with CSS
• Useful Angle - CSS triangle
• Github - box shadow and border-radius doesn't always look right
• Stack Overflow - how do I draw a diagonal div
• CSS Tricks - a CSS golfing exercise
• Sitepoint - CSS battle tips
• MDN Docs - CSS Nesting
• Medium - slanted background with clip path
• Stack Overflow - tapered div using CSS
• Play CSS - CSS Battle Knockoff Play CSS
• Codepen - CSS triangle clip paths
• Stack Overflow - quarter of a ring with css and html