Making basic shapes

It’s easy to make CSS shapes with solid colors by using borders, but it’s more difficult to make them with gradient backgrounds. The main trick is to use pseudo elements and `overflow: hidden“ to cut out the desired shape. There are many more shapes that this technique could be applied to, include many listed here, but I didn’t include them for brevity. See them on CodePen.

Special thanks to Ana Tudor because I took several of these shapes directly from her.

This is the base.

Added a little skew and scaled down the Y to keep in the correct proportions.

Similar as above, but with the rhombus rotated and cut off using a pseudo element.

Exactly the same as above, but with the translate(50%) taken out. For a parallelogram cut this in half by covering it up with a pseudo-element or something similar.

The same technique, but using a hexagon.

Shape outlines

Even harder than that is it to make shapes with outlines. This is because gradients don’t like to for to their shape and we cannot really use

Our new base.

Nothing new so far.

Here’s where it gets interesting. The most practical way I’ve found to make a bordered triangle is to make two triangles and layer them, either using the conventional border trick (which I use here for ease) or by using Ana Tudor’s transform with overflow: hidden trick like I did above. With that being said, I did come up with an extremely impractical way using box shadows that doesn’t use pseudo elements.

Sadly only shapes that can be made using one pseudo element can be done using this technique in one element. Using two elements any shape can have a border though

And that about wraps up what I have to offer on the subject. If you liked this you might also like my box-shadow play. There are probably some ghetto tricks like I linked above to do similar things with gradients/outlines, but if there is a cleaner approach for one of these please don’t hesitate to comment!