General Query for CSS Borders

There may be some helpful guide that I have missed, but I need some help.

I am currently on Step 43 of Learn Intermediate CSS by Building a Picasso Painting. I have understood everything so far and my query may be answered in the next few steps. However, the white and black hat sections have confused me.

To create the white and black hat sections you create a 0 width and 0 height div element. You then add border widths with the short hand and individually add border colors to each side. 3/4 sides are made transparent and then one is given a color. This makes a shape that has diagonal lines to make a triangle.

I just cannot understand how this is working without any rotation and how static widths and colors are making this affect.

I think this has a decent explanation.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.