Folded corner

How to use it

Put a triangle over one corner of a shape, and make the rest of the corner transparent.

When to use it

This makes it look as if the corner of a shape is folded back on the shape itself. You can use this purely for visual effect, or you can signify that there's something on the other side of the shape. Perhaps the element will flip over when the user taps it, for example.

What to watch out for

I've added a soft shadow beneath the folded over section in the example below. This will make it feel more natural.

You should not use this as the interactive element, since people might not know what it's there for. It's mainly to hint at something.

Examples

Example