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 :after
and :before
pseudo elements of the h1
tag. To get the border inside the main background of the h1
tag, :after
element's 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.