Create parallelogram shaped background

Recently I’m creating a travel website for my client and my design consist of something similar to this. The top green/brown bar. The easiest thing to do is use parallelogram shaped transparent png (or parallelogram shaped image) as a background and it’s done. Of course, that’s exactly what I do if my client wanted his site to be  compatible with older browsers and he is not. So CSS3 allowed me to create exact same design without single image 🙂


See, no images 🙂 . Note the ::before and ::after pseudo classes and z-index properties. Pseudo classes used to mask the left side of parallelogram since I need only one side to be angled. Z-index used to bring text and #top-phone-wrapper forward since I set the background color for #top-bar-wrapper the parent element.

Cheers !

Leave a Reply