Slants

What is a “slant”?

 

Really neat way to create a graphic with CSS.

This complex technique lets you create shapes with diagonal edges (and even curved ones if you have a lot of time and patience!) by taking advantage of the diagonal edges that appear between the horizontal and vertical borders of a CSS block. These edges are clearly visible in the following diagram (which is also pure HTML and CSS).

The question is, why wouldn't you just use an image? Well, for particularly large shapes (where the equivalent image file would be large), CSS Slants can download faster. CSS Slants can also be dynamically modified with JavaScript using common Dynamic HTML techniques.

It's a hack. A trick. It is a way to make pure HTML and CSS draw something that is neither vertical nor horizontal. And it uses borders.

Some examples of boxes with borders (sizes: 120px, 50px, 20px, and 0px squares, 10px borders):

See also: