Making Shapes
In order to make awesome triangles (as seen above) we must first learn about the CSS property clip-path. With clip-path you can mask parts of elements to create virtually any shape you want.
To mask an element we use clip-path and set the value to polygon(). The values that go inside of polygon() are coordinates for the vertices of the polygon like so: polygon(x1 y1, x2 y2, x3 y3). The shape will be drawn from point to point in the order that the vertices are in, so you have to be careful not to just plug in the coordinates of all the vertices in a random order. Triangles, however, do not follow this rule because the second vertice can only connect to the third and the third vertice has no choice but to connect back to the first. Coordinate values can be both pixels and relative units, so responsive shapes are (technically) possible.
Here's an example of a *simple triangle made by using clip-path: polygon(0% 100%, 100% 100%, 50% 100%) on a 200px x 200px div:
Theoretically you can have an infinite amount of vertices. Here's an example of an octagon with the value clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%):
Amazing, right? Well it gets better. Not only can you make polygons, but also circles and ellipses by usingcircle() and ellipse(). And did I mention the ability to make rectangles with inset()? I guess you can say that clip-path is shaping up to be an awesome CSS property.
Here is a wonderful example of a circle:
So, now that you've been enlightened upon the topic of clip-path you can use this newfound knowledge to make any shape you can think of and mask various elements as long as you're willing to put in the time to carry out all of the necessary calculations. And, if you're really feeling confident, you can slap hundreds of polygons together to make one baller self-portrait.