Creating Angled Corners with Transparent Background Images

As I explained in the section that you just read, it’s also possible to build some angled corners for a given web document by using the same approach that I utilized to display the rounded corners. As you might guess, the procedure is  limited to creating a transparent background image with the desired shape, and positioning this image inside the web page element that you want to decorate via some basic CSS styles.

In simple terms, the background image that I plan to use to build the angled corners looks like this (edited for the sake of clarity):

As you can see, the above background image has been created in such a way that it has only two solid areas, which logically are the ones that correspond to the respective angled corners. The rest of the image in question is completely transparent.

Of course, now that you have learned how to build the pertinent background image aimed at creating a primitive angled corner effect on certain elements of a given web document, you might want to see how this effect looks when applied to a particular container of a sample web page.

The below screen shot demonstrates very clearly the angled corner effect. In this case, it's implemented with a basic web page containing element:

After analyzing in detail the previous image, you’ll have to agree with me that building angled corners using only one transparent background graphic is actually a straightforward process that can be tackled with minor difficulties, even if you’re a web designer taking your first steps into this exciting terrain. Quite simple, right?

Okay, at this stage you hopefully learned how to style a particular element of a web page with a basic angled corner effect. However, the end result of this decorative process will be much better appreciated if you can see how the angled corners can be applied to certain sections of a sample web document.

Keeping this in mind, in the section to come I’ll develop a practical example where you’ll be able to see how the inclusion of some basic angled corners can improve the look and feel of a given web page.

To see how this brand new example will be set up, please go ahead and read the next few lines. I’ll be there, waiting for you.