## Single element shapes with gradients

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.

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 parrallelogram cut this in half by covering it up with a pseudoelement 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. There are probably some ghetto tricks like I linked above to do similar things, but if there is a cleaner approach for one of these please don't hesitate to comment!

Follow me on Twitter or here on CodePen to stay updated with more projects of mine. You can also view this post on my blog .