This is the hardest CSS Battle I've tried

I decided to take on what I thought was going to be a pretty easy CSS Battle, and it turns out that I had no idea what I was doing for half of them 😅
🔗 Links
✅ The CSS battle: cssbattle.dev/battle/22
✅ My Playlist of other CSS Battles: • CSS Battles
✅ My CSS Battle against Web Dev Simplified: • I've been challenged t...
⌚ Timestamps
00:00 - Introduction
00:51 - Challenge 1
04:06 - Challenge 2
17:24 - Challenge 3
30:48 - Challenge 4
44:36 - Challenge 5
52:04 - Challenge 6
57:45 - Challenge 7
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@chrisbolson]

I must admit that I quite enjoy watching you struggle through these cssbattle challenges - I'm sure the stress of doing them "live" makes them a lot harder than they actually are.

[@rockokaine3186]

Knowing how knowledgeable he is I find his struggles to complete some of these comforting

[@iamavegetable1936]

It's useless to scream at my screen to helps you :) Thanks you to share this with us. I have fun with CSSBattle today ! BORDER-BOTTOM:NONE!!!

[@simonjohn7259]

Challenge 4 - The leaf shapes are actually just squares with border radius on opposite corners. Just rotate them.

[@clevermissfox]

It is encouraging to see in these battles all the guys also make silly errors like mispelling classes, missing spaces, commas, and turning semicolons into colons or vice versa. It makes me feel like less of a dingbat 😂

[@CodeCraftStudio]

man I enjoyed a lot watching you struggle. Just made me a bit sane though, if you are struggling, then its ok for me to struggle. 😂

[@adamuk73]

You know it's a toughie when KP has frazzled hair at the end.

[@pintokatendejonathan1740]

I'm so happy to watch more and more your tutorials, and I love the way that you think for founding solution.

[@oruaromukoro5072]

Couldn’t you have done border: black transparent transparent black; for the second challenge

[@KevalMiistry]

Nice noticing but it will be: black black transparent transparent

[@fraaank]

@@KevalMiistry I was shouting this at the screen. 🙂

[@KevalMiistry]

@@fraaank Honestly Mee too man! 😭 I was like how the hell this person The Kevin Powel can't see what I'm seeing

[@royhyde8842]

@@fraaank hahahaha Same...

[@UPLYNXED]

You can use #0000 for transparent fyi

[@AnmAtAnm]

It was painful to see you struggle with the triangle after you had half the triangle at <a href="#" class="seekto" data-time="590">9:50</a> and the other half at <a href="#" class="seekto" data-time="609">10:09</a>.

[@user-pg9xo2ts5v]

agreeee

[@adamisonfiree]

These videos are so awesome, I'm learning CSS and I saw that and i was like BLACK BLACK!

[@GabrielMolterIO]

Scrolled down here to look for this comment and it was the first one I saw 😅

[@JulianColeman03]

I will never not hear "Hello my friend and friend". This challenge was nuts! Lots of good learnings

[@lifeisfakenews]

SAME i only recently realised he was saying front end friends not friend and friends

[@clevermissfox]

Same, thought it was friemd and friends 😂

[@zaidyt8565]

cool content man😎 keep the css battle series alive. can learn a lot of things from this🤯

[@MellstroyMemeSUS]

Kevin the last one was really amazing i really love your work. Man you are legend of CSS

[@stbausms]

Wow... I'm learning so much with every video. It's entertaining and informative at the same time! I'm watching more and more videos of you and discovered cssbattle for me to learn it the hard way. I guess I learnt more the last two weeks since I started watching it than the 5 years before. Great great work!!

[@CristianKirk]

The #137 (Elbow) only needs a single div and a pseudoelement. You got really tangled up with that one! It's just a box on top of another.

[@youtubeforcinghandlessucks]

no pseudo element, could just set border-bottom and border-right to 0px

[@axelkarlsson6580]

Can also be done with one div and border on top and left only

[@mellowmarvin]

What a great Video! As always :) Thank you!

[@d47im5e]

For a 5 year fireworks/photoshop to html slicer in my youth, i really enjoyed the last one, it made me talk with the screen, screaming and giving you the correct instruction as you do it(like a senior telling the answer of a question in a show)😊last one could be a separate video! Thank you and keep it up!

[@cristianzwierzynski1305]

Thats the definition of resilient job. I watch every video that You made. Love to learn how You aproach to the task from different views and that is awesome Excuse My English, it's not my language. Cheers from argentina.

[@NathanHedglin]

Love it! I was just showing my students the spiral one

[@_abdul]

<a href="#" class="seekto" data-time="62">1:02</a>:20 That Imposter Syndrome Kicking In.

[@joeschmoe76]

New to the channel. Love the content!

[@MichaelJones-us9ty]

I am very new but my first thought on the spiral was to make a million dots and just position them all around, but i learned a lot watching you. Love watching these you help me a lot. I like how you teach as you are doing these as well. thank you

[@jfftck]

The spiral can be made using box-shadow and a lot of them, that would allow for a single div to draw it.

[@ColeNOXyd2nd]

#138 can easily be done with corner radius on 2 corners x 3, rotate the white one

[@AThousandTales]

For the spiral challenge, I used clip-path:polygon(0px 0px, 0px 50%, 100% 50%, 100% 0%); instead of a pseudo-element.

[@alekz112]

Real ones use clip-path: path()

[@WilliamShrek]

This is both painful and amazing.

[@fagol1236]

<a href="#" class="seekto" data-time="1413">23:33</a> you could have done the #elbow challenge with just 2 divs and tweaking the border radius for four corners

[@prafuldeoghare1904]

maybe with a one div. we can pseudo element like :before and :after.

[@fagol1236]

<a href="#" class="seekto" data-time="600">10:00</a> border: black black transparent transparent; I was screaming😭😭

[@jfftck]

The other tip for these is to have a border of 0 or none for the side you don’t want instead of adding a pseudo element to cover it.

[@Im-mustafa-saeed]

well for challenge 4, imagine the shape of a venn diagram with two circles. where one circle is a parent element which has the { overflow: hidden; } . and the second circle is it's child element which has the background color you want, the intersection area should give you the desired shape

[@elmalleable]

target 22 just a cheeky tip, use .outer .inner and styly inner to get one leg, refect it once to get 2 legs, then reflect outer to get all 4 legs

[@nbot3000]

The last spiral puzzle best solution takes 160 symbols, and im interested in viewing that code (im free user at the moment, so i cant). For me its not a problem to get 100% identity for any puzzle, the most value is code shortness. I have 600-720 points avg, but top solutions scored by 800+ and at the same time the avg puzzle score is 500-550. I learn some top solutions and i found they very hacky. High score solutions are NO using divs, position, etc.. they using scss, style attributes inside html nodes and so much more very interested combinations. Its nice place to learn or improve skills. Thank you to discover that space for me.

[@johnwarren7722]

Kevin, I noticed you had a bit of trouble with the shape in the Lotus test. It can be done easily in 6 lines of code. .leaf{ height: 8rem; width: 8rem; background-color: teal; border-top-left-radius: 8rem; border-bottom-right-radius: 8rem; transform: rotate(-45deg); } Hope this is useful. Love watching your videos and I have learnt so much from them. Cheers John

[@markthepianist6577]

There was a cleaner and hackier way to do the elbow Container div with overflow hidden + enormous rounded rectangle :)

[@kesvalsensei8251]

Please do more of these long videos!

[@commanderkruge]

Oooooooh - I never would have thought to use borders as the base for triangles! GREAT little trick. :D I'd have tried the four white "drops" with four divs with one round side and then "substract" 2 squares in red that are rotated 45°. :)

[@Queue88]

Challenge 4: two TIL doing this challenge: box-reflect can be a neat tool for things that are in any way mirrored, like the two brown ones. What I did was: width: 100px, height: 100px; border-radius: 0 100px; -webkit-box-reflect: right 0; then position it right for the browns. For the white one i did the same, but without reflection and rotated around 45deg. Still this would never be possible without everything i learned from you.

[@nekocari]

I had an idea for the lotus one after seeing you use rotate. My approach was using border- radius : 100% 0; on the div. Turned out a 100% match with less than 420 characters used.

[@eldrago3140]

Your videos are the best 😊. Can you please make a video on drag and drop?

[@edwinandrescollazos4258]

I love CSS battle videos!!

[@Acaykath]

Watching you do lotus and missing the easy solution... Big transparent circle with overflow hidden. White circle inside offset to the left or right to get the pointy ended oval. Repeat for other two petals with different colour inside circle and offset direction... in fact for the brown petals you can use the same transparent circle container.

[@craig7520]

I'd love to see an episode of this where you do an unoptimised solution speedrun

[@JlHAD]

<a href="#" class="seekto" data-time="2650">44:10</a> for the fourth challenge you can get the results with: border-radius: 100% 0; rotate: -45deg;

[@casesensitive9744]

I got the solution at 1hr 7s based on your ideas. Making it more rectangular then using pixels to define they border radius. I still don't know what you final solution will be at this point.

[@chrisbolson]

The lampshade could be achieved by using transparent borders and adjusting the bottom border with and color something like this: width:100px; border:60px solid transparent; border-bottom:200px solid pink;

[@BunkerD]

For the second one, you could have just done 4 for white rectangles rounded on the middle side (flat toward the outsiders), then cover with a div superposed to the container with "border: transparent pink" (to create two side triangles hiding the white in excess).

[@deatho0ne587]

<a href="#" class="seekto" data-time="2941">49:01</a> I have never done clip-path, but would guess something like (25px 0px, 0px 25px, 0px 0px, 0px 0px), with some of the 0px being 100% For the last it looks like a line, na the last one is 2 dots with 3 border-radius on larger circles

[@user-ce9vy9hw6w]

Challenge 3 - use borders top and left div { width: 250px; height: 150px; background: #6592CF; border-top: 50px solid #060F55; border-left: 50px solid #060F55; border-radius: 100px 0 0 0 }

[@Memer09157]

In challenge no. 7 sprial if you see, those are just half circles, but some is up facing and some are down face or rotated. Love your videos..

[@andradegilmar]

This spiral was crazy!

[@d.l.3807]

Challenge 4: 3 divs that take in: width: 100, height 100, border-radius: 100% 0; Then you have the shapes. Position them nicely and done. :)

[@MsAnnieHuang]

Thank you Wiz for giving the exact solution. A lot of people describe what to do but I got confused. Your answer is much more clear.

[@simonswiss]

OMG I had *never* noticed the "Diff" checkbox that gives you the "x-ray vision" - so useful when you try pixel push a value 😅

[@Pixcellworld]

For the <a href="#" class="seekto" data-time="2668">44:28</a> you should of done it with squares. Giving diagonal corners a radius of 100% then rotating it.

[@AndrewMolodushko]

Kevin, thanks for your video. challenge 4. width:100, height:100, border-radius:100 0 100, rotate -45deg :)

[@widevader]

On the triangle one, couldve used both before and after, and made 2 triangles. As first one you made plus the second one wouldve been the stuff you needed.

[@ISandbagI]

that final one gave me so much anxiety XD

[@_g4m3r_]

Kevin's hair says it all for the last one! It was tough! 😊

[@BlockCylinder]

I did that cinnamon bun spiral with a bunch of semicircular divs, defining the border radius in pixels rather than %. I think it took me about a half hour, too, and I only got a 99.5% match.

[@padmanabhans6632]

might help full! that was a right angled triangle !!

[@yassinezanina]

And here is me screaming at the screen from the top of my lungs black black transparent transparent 🤣🤣

[@ChrisMochinskiMusic]

You should TOTALLY accept challengers for these occasionally. Solid, simple content opportunity! Vet a few projects to make sure things align, and take ‘em on. Think about it! I’d love to get my butt kicked by you at one of these (though I do OCCASIONALLY) find myself a step ahead of you as I’m following along…but hey, easier said than done!).

[@Tiagocf2]

wow that last one is mind blowing

[@JDalmasca]

I almost never use transform now that rotate and translate are their own properties (and use the GPU). It's a bonus that they also give you a higher score.

[@beresteanugeorge]

For second challenge you can use border-radius: 100vmax for pill shape, then use clip-path: polygon (0 0, 0 100%, 100% 100%, 50% 100% )

[@haliszekeriyaozkok4851]

This guy because of that King Of Css. You're definitely a Css legend already.

[@Renegade192]

I haven't tried it, but on the challenge with the triangles couldn't you have used linear gradient to cut the box in half at a 45deg angle and have another box next to it with the corners rounded? Would that work?

[@bernardoramalhete8015]

I completed the lotus challenge doing the leafs using borders. I used border: 50px solid then set their colors, after that I used a border radius of 140px to get the shape right. This way I did all the leafs using 1 div for each then rotating them accordingly. I also used a display grid for centering everything then repositioned the elements with position absolute. This way I used only 3 divs total and about 30 lines of css.

[@bernardoramalhete8015]

I commented before watching the last challenge. I laughet out loud when you discovered the border thing

[@catalinbanici3357]

For the second challenge could it worked like 2 square divs rotated 45 deg with the same color as background? For the fourth elbow challenge, maybe 2 rectangle divs one smaller than the other in a flex container, justify content and align items end, position absolute with border top left radius ..? 🤔

[@calle90]

I Love this kind of Videos

[@olesejus]

Lotus: border-radius: 200px 0 200px 0; width: 100px; height: 100px;

[@rodbrowning]

<a href="#" class="seekto" data-time="75">1:15</a>:43 I thought it was just me struggling like that huashuashuas. looks like Im not alone.

[@dirkczaja7227]

What about alternating box shadows in two containers with overflow hidden for the last challenge...? Because upper and lower half are both concentric half circles... Would be quite similar to your solution but with only 2 divs and 2 dots... Didn't try it yet... and maybe didn't think it to the end... but worth a shot I guess

[@PowerfulJayKay]

Spending my days learning to become a web dev for 2025. My go to choice of procrastination has now become watching Kevin do CSS battle challenges.

[@haythamkenway1561]

Great video CSS king. I wonder if there's `JavaScript` battle or not.

[@_tanzil_]

<a href="#" class="seekto" data-time="3465">57:45</a> At first i was like, dude... It's impossible with CSS only!! And then after few minutes of thinking 🤔: well,, that is kinda possible but I'm not 💯% sure 😄

[@UPLYNXED]

Challenge 4 (Lotus): I used a repeating radial gradient inside of my first element to create the two background shapes, and a [border radius: 0 100%; rotate: 45deg;] for the foreground shape element. Ended up 88th on the leaderboard with that approach! Challenge 7 (Spiral): I used two elements stacks, with radial gradients with multiple color stops for each arc. Custom variables for the position and the stops so I could apply it to both elements and just adjust the vars for the lower one. Scored 58th doing it this way :D

[@RobBulmahn]

For that second one giving you trouble with the triangles, my first thought went to clip-path.

[@RobBulmahn]

And for elbow, a dark blue div with one rounded corner, and then either inside or on top of that, a light blue div with one rounded corner.

[@omarbader9529]

this gave me a 100% on the lamp: body{ background:#E38F66; } .a { position:absolute; top:90px; left:136px; border-bottom: 120px solid #FFFBDA; border-left: 32px solid #E38F66; border-right: 33px solid #E38F66; height: 0px; width: 63px; } .b{ position: absolute; width:10px; height:90px; background:#62306D; top:210px; left:195 }

[@MrKOHKyPEHT]

OMG that spiral.... Jigsaw )) My solution: screenshot and background-image :D

[@razor-4eg]

<a href="#" class="seekto" data-time="63">1:03</a>:15 - screaming in my head - border-bottom, border-bottom, border-bottom

[@ChrisMochinskiMusic]

I would also like to share that you have by far the most palatable channel for CSS freakazoids like me. Please keep doing what you do!

[@mannixmd]

when Kevin said e a my mind immediately went to e a sports it's in the game 😂🤣

[@mikeynma]

Isnt that the Dreamcast logo thing? Guess I should wait as you havent got there yet in my viewing 😂

[@ako1129]

In the spikes challenge, couldn't he use 4 rectangles with the borders curved and then use 2 big triangles the same color of the background to divide them in half? Or put together 2 small triangles at the back of the white halfs? Or even keep that bigger black triangle and curve its border so it fits in the white part?

[@icdesignervishal8768]

elbow challenge easy way .line-box{ height:150px; width:250px; border:50px solid #060F55; margin-bottom:15px; border-bottom:0; border-right:0; border-radius:100px 0; }

[@programingwithali2461]

Long time ago I good in css battle now I good but before is better

[@trvvs]

<a href="#" class="seekto" data-time="2657">44:17</a> div { width: 100px; height: 100px; background-color: orange; border-radius: 100% 0; rotate: -45deg; }

[@VeitLehmann]

Just spent another hour on the spiral, now down to 348 characters which got me to #38 on the leaderboard! 😁 But how on earth can you solve this with 160 characters??

[@nataliesmyth9013]

When I put display flex, justify content and align items center, the div still sticks to the top. I had to put a margin top to push it down and I have no idea why!

[@Milky____]

That last one was crazy 😅

[@chrisbolson]

Kevin was actually nearly there with his initial spiral, all he needed to do was remove the bottom border with border-bottom:none; and then he wouldn't have needed the pseudo element (though we all know that Kevin loves his pseudo elements :) )

[@Debargha16]

You could had used mix-blend-mode in that flower type problem

[@mikeonthebox]

Not sure why on the spiral you didn't use the same trick that you used to create the triangle, by defining 2 borders with the correct color and then other 2 with transparency. Still not sure if it would have made things any easier.

[@ComeCaramelos_]

border-color: black black transparent transparent; =) Nice video

[@GR_BackingTracks]

I took a nap with autoplay on, and now I've woken up and signed up for CSSBattle... Two Battles down, 140+ to go!

[@SEWebDesign]

I was yelling BLACK BLACK TRANSPARENT TRANSPARENT at the screen haha! Imagine all the times the answer has been right there when we hit a wall in CSS.

[@VeitLehmann]

Just solved the spiral at 100% with 475 characters in about 1 hour, now let's see how you did it!

[@thildamoon]

Question: could the spiral be done with a svg-path drawn?

[@rafaelmenna8384]

Yes but it's not CSS.

[@the_BetaDev]

I used clip-path with challenge 2 (battle 22).

[@svetsec]

I followed along the first challenge with you and somehow even though I typed display: flex, justify-content: center; align-items: center; it doesn't center my divs, but when I put height 100vh in body it centered the divs. What is the issue here?

[@svetsec]

I actually figured this one out. I tried using Chrome and guess what? The same code centers the divs. But firefox won't. The hell?

[@rodbrowning]

Awesome 😍

[@necastiv11]

You have great skill, but these should be SVG icons. Please make some courses with SVG-s?