< Back to Frontend Friday Folks Index

Donkey Kong

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (473 characters)
1 
<div l>
2 
  <div></div>
3 
</div>
4 
<style>
5 
  body{
6 
  --s:20px 50px no-repeat;
7 
  --g:conic-gradient(#fff,#fff);
8 
    background:
9 
    var(--g) 79%/20px 90px no-repeat,
10 
    var(--g) 50% 60%/var(--s),
11 
    var(--g) 21% 40%/var(--s),
12 
    #000}
13 
[l]{
14 
  margin:75 auto;display:grid;place-items:center;width:280;height:150;
15 
  div{rotate:-4deg}
16 
  &:after,&:before,div{
17 
    display:block;
18 
    width:100%;
19 
    content:'';
20 
    border: 10px solid #AF067C;
21 
    border-radius: 10px;
22 
  }
23 
}
24 
</style>

Ok, so the solution was kind of okay like this: A couple of gradients for the white "ladders" and the inside div and its pseudo elements :before and :after for the purple floors.

I can't remember why, but after doing this CSS Battle, I've researched a bit about this new hsl(from currentColor h s l) syntax. When playing around with it for a bit, I noticed a but that reproducibly crashed Chrome for me with pure CSS. I've submitted a bug report which got fixed pretty fast. It took a bit longer to land in the latest stable version, but it is now. Joe put an SVG online with the crash code on GitHub and it could reproducibly crash Chromium based browsers when they navigated to the page. This doesn't happen anymore now.

< Back to Frontend Friday Folks Index