{"id":21307264,"url":"https://github.com/jdegand/cssbattle","last_synced_at":"2025-03-15T19:48:57.259Z","repository":{"id":37522243,"uuid":"431630894","full_name":"jdegand/cssbattle","owner":"jdegand","description":"CSS Battle Solutions  ","archived":false,"fork":false,"pushed_at":"2024-10-29T18:31:49.000Z","size":720,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-29T20:36:24.854Z","etag":null,"topics":["css","css-battle","css-battle-solutions","cssbattle","cssbattle-solutions"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdegand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-24T21:19:06.000Z","updated_at":"2024-10-29T18:31:53.000Z","dependencies_parsed_at":"2023-02-15T19:30:45.159Z","dependency_job_id":"7e4a7a5d-9323-43ba-b6ba-16a9a5120af1","html_url":"https://github.com/jdegand/cssbattle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcssbattle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcssbattle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcssbattle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcssbattle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/cssbattle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243784103,"owners_count":20347409,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-battle","css-battle-solutions","cssbattle","cssbattle-solutions"],"created_at":"2024-11-21T16:30:53.139Z","updated_at":"2025-03-15T19:48:57.236Z","avatar_url":"https://github.com/jdegand.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Battle Solutions\n\n**Note**: I have stopped doing the daily battle. I completed every daily CSS Battle from 6/28/23 to 1/1/25.\n\n## Thoughts\n\n- With these solutions, you should get close to the Top 100 when you incorporate all the optimized open solutions.\n- 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.\n- 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.\n- 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.\n- I feel like the harder main battles typically require 30-45 minutes to achieve 100%.  \n- 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.\n- [CSS Nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting) is pretty much required for the best solutions.\n- Using `clip-path` for triangles is a gamble and can be time-consuming to adjust.\n- 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.\n- It is important to note that the battles are designed in Figma. The creators can't verify all battles are solvable ahead of time.\n- To get the best solutions, you need to incorporate tools and use generators and online editors.  AI is not much help to CSS golfing.\n- 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.\n\n## Useful Resources\n\n- [CSS Battle](https://www.cssbattle.dev)\n- [CSS Battle Previewer 2.0](https://tc70f3.csb.app/)\n- [Github](https://github.com/cssbattle/forum) - CSS Battle Forum\n- [Github](https://malcolmkiano.github.io/clip-path-generator/) - clip path generator\n- [Github](https://yqnn.github.io/svg-path-editor/) - SVG path editor\n- [CSS Tricks](https://css-tricks.com/the-shapes-of-css/) - shapes of CSS\n- [Shark Coder](https://sharkcoder.com/visual/shapes) - CSS shapes\n- [Paulund](https://paulund.co.uk/how-to-create-different-shapes-in-css) - CSS shapes\n- [Stack Overflow](https://stackoverflow.com/questions/22406661/how-to-make-one-circle-inside-of-another-using-css) - circle inside another circle\n- [Stack Overflow](https://stackoverflow.com/questions/30711203/how-do-i-create-a-teardrop-in-html) - teardrop\n- [Stack Overflow](https://stackoverflow.com/questions/56864210/how-to-change-intersection-color-in-venn-diagram) - intersection color in venn diagram\n- [CSS Portal](https://www.cssportal.com/css-clip-path-generator/) - clip path generator\n- [Stack Overflow](https://stackoverflow.com/questions/15938933/creating-a-chevron-in-css) - CSS chevron\n- [Stack Overflow](https://stackoverflow.com/questions/42877961/a-triangle-in-css-that-takes-the-whole-width-with-a-fixed-height) - CSS triangle whole width fixed height\n- [Coding Dude](http://www.coding-dude.com/wp/css/create-a-triangle/) - CSS triangle\n- [YouTube](https://www.youtube.com/watch?v=6QGOhCZLdhs) - Create Slanted or Razor-Blade Div Shapes with CSS3\n- [RipTutorial](https://riptutorial.com/css/example/8071/3d-cube) - 3D cube\n- [Codepen](https://codepen.io/ooo/pen/QomVgY) - 3D rectangle shape\n- [Stack Overflow](https://stackoverflow.com/questions/22415651/half-circle-with-css-border-outline-only) - half circle with css border\n- [CSS Tricks](https://css-tricks.com/forums/topic/how-to-make-curve-line/) - make a curved line\n- [JS Fiddle](http://jsfiddle.net/awayF/490/) - CSS checkmark\n- [Codepen](https://codepen.io/gliesche/pen/ZQyPeV) - CSS checkmark\n- [Stack Overflow](https://stackoverflow.com/questions/40386130/how-to-create-parallelograms-divs) - Parallelograms\n- [Stack Overflow](https://stackoverflow.com/questions/26961221/how-to-make-an-oval-in-css) - Oval\n- [W3 Schools](https://www.w3schools.com/howto/howto_css_pill_button.asp) - Pill button\n- [Stack Overflow](https://stackoverflow.com/questions/8452739/css-inset-borders) - CSS inset borders\n- [Stack Overflow](https://stackoverflow.com/questions/10922387/create-an-l-shaped-border-using-html-and-css-is-it-possible) - L shaped border\n- [CSS Tricks](https://css-tricks.com/snippets/css/multiple-borders/) - Multiple borders\n- [Geeks for Geeks](https://www.geeksforgeeks.org/how-to-draw-a-semi-circle-using-html-and-css/) - semi circle\n- [Stack Overflow](https://stackoverflow.com/questions/25939372/css-u-shaped-or-curved-borders) - CSS u shaped or curved borders\n- [Codepen](https://codepen.io/seheekim/pen/BKYGZp)- Cylinder\n- [Stack Overflow](https://stackoverflow.com/questions/40752681/making-a-smile-horseshoe-half-circle-with-rounded-edges-in-css) - smile horseshoe\n- [Stack Overflow](https://stackoverflow.com/questions/52712506/cut-a-circle-into-half) - cut a circle in half\n- [Stack Overflow](https://stackoverflow.com/questions/44920224/how-to-bend-a-div-in-css) - how to bend a div in CSS\n- [Codepen](https://codepen.io/samc36/pen/KNEOpG) - eye shape\n- [1-notes](https://1-notes.com/css-shape-swirl-design/) - CSS swirl design\n- [Dev.to](https://dev.to/astrit/css-only-outlined-triangle-1k8j) - CSS only outlined triangle\n- [CSS.gg](https://css.gg/shape-triangle) - shape-triangle\n- [Coding Dude](https://www.coding-dude.com/wp/css/create-a-triangle/) - create a triangle\n- [HashNode](https://nazanin-ashrafi.hashnode.dev/how-to-make-a-moon-with-css) - how to make a moon with CSS\n- [Toptal](https://www.toptal.com/developers/cssminifier) - CSS minifier\n- [Unused CSS](https://unused-css.com/blog/css-half-circle/) - CSS half circle\n- [Stack Overflow](https://stackoverflow.com/questions/39339196/how-to-make-circles-repeat-in-the-background-of-an-element-in-full-css) - how to make circles repeat in the background of an element\n- [Stack Exchange](https://codegolf.stackexchange.com/questions/259254/is-there-any-less-code-way-to-make-a-leaf-eye-shape-in-css) - eye shape in CSS\n- [CSS Tricks](https://css-tricks.com/how-to-play-and-pause-css-animations-with-css-custom-properties) - play and pause css animations\n- [W3 Schools](https://www.w3schools.com/howto/howto_css_loader.asp) - CSS loader\n- [Stack Overflow](https://stackoverflow.com/questions/37437141/css-border-shorthand-when-each-border-has-a-different-width) - CSS border shorthand when each border has a different width\n- [Codepen](https://codepen.io/rhgksrua/pen/GgbLKM) - CSS alphabet\n- [Blog](https://kennethormandy.com/journal/pure-css-lettering-a-bad-and-fun-idea) - pure CSS lettering a bad and fun idea\n- [CSS Tricks](https://css-tricks.com/building-progress-ring-quickly) - building progress ring quickly\n- [YouTube](https://www.youtube.com/watch?v=mSfsGTIQlxg) - How To Make Circular Progress Bar Using HTML CSS JavaScript | Neomorphism Progress Bar\n- [Blog](https://nikitahl.com/circle-progress-bar-css) - circle progress bar CSS\n- [Github](https://nikitahl.github.io/svg-circle-progress-generator) - SVG circle progress generator\n- [Stack Overflow](https://stackoverflow.com/questions/13059190/html5-css3-circle-with-partial-border) - HTML5 CSS3 circle with partial border\n- [Stack Overflow](https://stackoverflow.com/questions/17285514/is-it-possible-to-make-a-squiggly-line) - squiggly line\n- [singhak](https://singhak.in/draw-half-and-quarter-circle-with-css/#3_Quarter-Circle_with_CSS) - quarter circle with CSS\n- [Stack Overflow](https://stackoverflow.com/questions/50598433/create-a-two-color-circle) - create a two color circle\n- [Stack Overflow](https://stackoverflow.com/questions/20803489/draw-a-curve-with-css) - draw a curve with CSS\n- [Abobe](https://color.adobe.com/create/image-gradient) - image gradient\n- [Colorzilla](https://www.colorzilla.com/gradient-editor/) - gradient editor\n- [JS Fiddle](https://jsfiddle.net/joshnh/bKfKm/) - CSS alphabet\n- [Stack Overflow](https://stackoverflow.com/questions/41265044/curved-line-css-rounded-border) - curved line CSS rounded border\n- [Stack Overflow](https://stackoverflow.com/questions/30044372/how-can-i-make-css-curved-line) - CSS curved line\n- [YouTube](https://www.youtube.com/watch?v=wEP1mUuLODQ) - CSS triangle with border - Shape | web zone\n- [Dev.to](https://dev.to/alvaromontoro/drawing-a-triangle-with-css-5g31) - drawing a triangle with CSS\n- [Stack Overflow](https://stackoverflow.com/questions/16231184/how-to-create-a-transparent-triangle-with-border-using-css) - how to create a transparent triangle with border using CSS\n- [Stack Overflow](https://stackoverflow.com/questions/62759278/element-with-border-radius-inside-element-with-border-radius-is-not-consistent) - element with border radius inside element with border radius is not consistent\n- [Stack Overflow](https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css) - draw diagonal lines in div background with CSS\n- [Medium](https://medium.com/@miguelznunez/html-css-how-to-split-a-background-into-2-colors-1cdc394deb3d) - HTML CSS how to split a background into 2 colors\n- [LogRocket Blog](https://blog.logrocket.com/how-to-create-yin-yang-symbol-pure-css) - yin yang symbol pure CSS\n- [Codepen](https://codepen.io/AdamSSenniN/pen/xZpaow) - how to create yin yang symbol pure CSS\n- [Blog](https://alvaromontoro.com/blog/67970/drawing-a-triangle-with-css) - drawing a triangle with CSS\n- [Useful Angle](https://usefulangle.com/post/333/css-triangle) - CSS triangle\n- [Github](https://github.com/w3c/csswg-drafts/issues/7103) - box shadow and border-radius doesn't always look right\n- [Stack Overflow](https://stackoverflow.com/questions/22352311/how-do-i-draw-a-diagonal-div) - how do I draw a diagonal div\n- [CSS Tricks](https://css-tricks.com/a-css-golfing-exercise/) - a CSS golfing exercise\n- [Sitepoint](https://www.sitepoint.com/code-challenge-2-4-tips-for-higher-scores-in-cssbattle-dev/) - CSS battle tips\n- [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting) - CSS Nesting\n- [Medium](https://kswanie21.medium.com/slanted-background-with-clip-path-css-property-584b5564a533) - slanted background with clip path\n- [Stack Overflow](https://stackoverflow.com/questions/18496383/tapered-div-using-css) - tapered div using CSS\n- [Play CSS](https://playcss.app/) - CSS Battle Knockoff Play CSS\n- [Codepen](https://codepen.io/adamlaki/pen/JxJwwB/) - CSS triangle clip paths\n- [Stack Overflow](https://stackoverflow.com/questions/16263358/quarter-of-a-ring-with-css-and-html) - quarter of a ring with css and html\n- [CSS Generators](https://css-generators.com/) - A wide range of CSS generators to make your developer's life easier!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fcssbattle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fcssbattle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fcssbattle/lists"}