Single Tag Heading Folded Style - Snippet

Single Tag Heading Folded Style
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.

Download Single Tag Heading Folded Style Code Fullscreen Tutor Play Walkthrough

Leave a Reply

Your email address will not be published. Required fields are marked *