@kn_wler
Scott taking the time to teach new features during a speedrun lmao. A teacher through and through.
@Cuwubiq
Poor Scott, he was so close, all he was meant to do is to not start the shape from 0 0, kevin going the traditional clip path way was solid and he deserves the first place obviously! one thing im maybe slightly sad about is the fact noone tried to make the triangle using the border trick. either way, incredible video!
@waleedbinalim
Kevin : [sips water] Wes: WHY'D I CHOOSE ABSOLUTE POSITIONING? Scott: Debugging why the clip path didn't work (Also learns it a few days ago) CJ: 1 pixel? No... 2 pixels? No... Lets do 3 pixels Always fun having the bois from Syntax involved
@InternetDoggo
Petition to give Scott justice for CSSBattle's wonky testing. I give him honorary 0th place, and we all know 0 is the true first place
@AllHandsOnEveryThing
This was great to watch. 4 different types of brain cells and their problem solving skills 😂 so different, so fascinating to watch each of them. This why i love CSS! So flexible
@kinetic_pixels
love this type of content ... more group challenges!!
@GavinWoodthebarbarian
you guys where way overthinking it , lol!!! just use a square : width: 160px;
height: 126px;
background: #E25C57;
border-top-left-radius: 80px;
border-top-right-radius:80px;
position: relative;
and there you have your top dome.
for the base:
height:46px;
width:260px;
position:absolute;
bottom: 0;
left: 50%;
translate: -50% 0;
display: flex;
justify-content: space-between;
align-items: center;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 46px solid #F3AC3C;
then just add dot and your got all your shapes. display grid place items center and you basically there
@Danachew
I had a feeling if anyone was going to give CJ a run for his money it was going to be Kevin. Well done!!!!
@Linuxdirk
That was a great video! Oh, and I love how easy it is to center something horizontally and vertically, just two lines!
@VarunVerma
"This is going to be stressful because it is as fast as possible. Which is normally what I'm pretty good at"
@futurefox128
@15:41: This is funny. While I immediately saw that the circle is indeed a circle (clipped at the bottom), the idea of clipping it with a bottom box-shadow of the shape inside it was waaay too clutch! ❤I would have taken a much more complicated path. Kevin's still the CSS GOAT. I must admit I haven't watched your videos in a while (CSS is a love-hate relationship after all), but now I'll definitely binge again! Edit: haha spoke to soon. Box shadow ended up glitching at the end ^^'. Still such a good idea. And also doing clip-path: polygon(), while expected, was crazy: Especially the part where the calc() syntax demanded a space around the minus-sign would have completely broken me. :D
@trilochaan42
guys simple do border:20px solid transparent; border-bottom:20px solid red; this creates a triangle
@bled72
Scott is the absolute GOAT 😂😂, the way he struggles makes me review my judgment about my own skills 🤣🤣.
@alonsovazquezurquiza4058
Hahaha I love when Scott realized he was screwed he was just playing around trying to figure that function works lol xD
@bentomlin
Gosh, this was a frustrating watch :D Y'all know you can just do special borders on a rectangle to do triangles right? And watching Kevin try to make it a squished circle killed me
@simonswiss
These are so much fun!
@cataleast
I love how varied the approaches to dealing with the different sections were. Just goes to show how there's rarely a single "correct" solution when it comes to CSS.
@ashish_prajapati_tr
5:28 some kind of shape, some kind of shape 🤣🤣🤣🤣🤣
@Pringle281984
Kevin if you're struggling to remember X and Y, just remember: X is across. X is "A CROSS"
@WesBos