Shapes with CSS

Follow along with this video to learn how to make shapes:
Video for learning to make triangles and circles

Use the following site to practice making the shapes in HTML and CSS for your self:
Code HTML and CSS directly on this site!

Use "ctrl" + "u" to view the HTML, then click on "shapes.css" inside the <link rel="stylesheet" href="shapes.css"> element to view the CSS.

Triangles

Start with a square:

Now the fun really begins with this funky shape! If you can make the funky shape, then you should also be able to make left, right, up, and down isosceles triangles.

Try making an upward pointing isosceles triangle:

Transformations

Try making a downward pointing isosceles triangle:

Try making a right pointing isosceles triangle:

Try making a left pointing isosceles triangle:

Try making an upward pointing isosceles triangle rotated 0 degrees clockwise:

Try making an upward pointing isosceles triangle rotated 30 degrees clockwise:

Try making an upward pointing isosceles triangle rotated 60 degrees clockwise:

Try making an upward pointing isosceles triangle rotated 90 degrees clockwise:

Circles

To make a circle start with a square:

Watch what happens as we round the square more and more:

The circle is actually a heavily rounded square: