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.