Give help. Get help.

  • # April 11, 2013 at 1:56 am

    Hello all!

    I am interested in creating similar h2 tags to the ones in this website:


    I like the trapezoidal shape of the background highlighting and also how two colors are used.

    Can anyone point me toward a tutorial that explains how to do this?



    # April 11, 2013 at 2:19 am

    It’s very simple. You can check code through firebug OR inspect element.

    Here is sample class which used in given link:

    .yourclass h2 {
    font-size: 50px;
    color: white;
    padding: 10px;
    background: url( center no-repeat;

    Please make your own background image. I’ve just added from reference URL.

    # April 11, 2013 at 2:26 am

    ahh, ok, so the background is actually an image. That is helpful. thanks a ton!

    # April 11, 2013 at 2:28 pm

    @ChrisP: sligthly buggy on Chrome 26 Mac OS X. Triangle is a little bit to big.

    # April 11, 2013 at 5:05 pm

    I guess setting height (line-height?) and border in ems would be the very least to make it more elegant/reusable :)

    Off-topic (there should be more off-topic chit-chat on this forums): Almost didn’t recognize Hugo there! :P

    # April 11, 2013 at 5:40 pm

    this is phenomenal! Thanks Chris & Hemzone

    # April 11, 2013 at 5:42 pm

    I am a compete CSS newb, how can i implement this code on my site? I am running wordpress using the Canvas theme, if that helps.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.