Single Tag Heading Style (Folded)
Folded heading created using just one
h1 tag that is styled using CSS. The borders and the folded corner is created using
:before pseudo elements of the
h1 tag. To get the border inside the main background of the
height is set according to the padding required and then positioned absolutely.
The fold is created using borders (the triangle trick, you can learn more about creating triangle using CSS3 here) and is given a darker background color to make it look like it's beneath the heading background. You can use this technique to style even paragraphs, blockquotes or anything you like. Take a look at the code to see what's happening.