Pointed transition

How to use it

With a transition from one background to another, have the transition "line" come to a point in the middle of the transition.

When to use it

This is visually more interesting than a straight-line background transition. It also helps lead the eye, since the transition is pointing (In this case, downwards) to the next area of the design. Keep in mind that you don't need to put the lowest point in the exact centre of the transition. You could use this technique to point to a specific element in the next area of the design, such as the title.

What to watch out for

You'll use more space with this transition since you have to allow for the extra vertical space taken up by the "point". If you're using straight-line transitions elsewhere, you might throw off the vertical rhythm of the page.

Examples

Example