Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Single Tag Heading Style (Folded)

    CSSDeck G+