I had one of those moments this week when I remembered I saw a while ago a tucked corners effect made by Joshua Hibbert. That was cool. While thinking about it, one of my first thoughts was to try finding an alternative solution that can allow you to use a pattern as a background for the containing block.
The following markup is pretty similar to Joshua Hibbert’s solution. There’s nothing to change or to improve here. At first sight, you may think there’s some extra markup in there but we’ll actually need everything below in order to be able to create four corners using CSS pseudo-elements.
The [class*='tucked-corners-'] advanced selector will select only the elements that have the string tucked-corners- anywhere within the class attribute value.
My “workaround” was to use the following IE9 CSS hack to hide the pseudos shadows. So, unfortunately, you will not see any tucked corner on IE9.
With pros and cons, this is a solution to keep in mind when you’re using tucked corners boxes for your web designs. The solution I showed you in this article will allow you to use this effect even when you’re using a pattern as background for the containing block.