Triangles Galore

So not fancy..but will do the job

...but if you have suggestions on how to clean-up positioning / CSS, let me know - had to throw together quickly before class.

Deconstructed Triangle - Best in Console

  1. Take a box...with equally sized borders
  2. ...and shrink it to 0 height and width...
  3. To create a triangle, focus on the border opposite from the triangle's main vertex (the direction you want the triangle to be pointing)...and set attributes you want (color, size, etc.)
  4. The larger the border size, the larger the triangle
  5. Make the adjacent borders transparent

Triangle Types

Acute Isosceles Triangle
Right Triangle

Eliminate margin-top or margin-bottom

Equilateral Triangle

main border of focus = 86.6% * (adjacent border + adjacent boarder)

Resources