Grow your CSS skills. Land your dream job.

CSS Banners

  • # December 21, 2012 at 12:15 pm

    I am trying to get a banner effect on my website. It’s not public (the files (Sorry!)).

    There is a pattern in the background and i have a div with background then i am using a :before element and i’m trying to get the background of the page come though the css triangle on the :before element but i cant seem to do that at all.

    Help. Please!

    # December 21, 2012 at 12:17 pm

    @Htmlmainiac, make sure you’re including `content: ”;` in your pseudo elements..could that be it?

    # December 21, 2012 at 12:19 pm

    no its the background not it not appearing.

    # December 21, 2012 at 12:21 pm

    I’m sorry, I must have misread it. Are you using borders to create the triangle?

    # December 21, 2012 at 12:21 pm

    Can you take a printscreen and upload it to [Imgur](http://imgur.com/ “”) and share it with us here at least?

    # December 21, 2012 at 12:30 pm

    ok @Watson90

    # December 21, 2012 at 12:44 pm

    The screenshot is [here](https://docs.google.com/file/d/0BxNCsOwmPt2LUk5yZkxGa1BKQWc/edit)

    # December 21, 2012 at 12:45 pm

    The arrows represent were the triangles should be

    # December 21, 2012 at 12:48 pm

    @Htmlmainiac, z-index?

    # December 21, 2012 at 12:50 pm

    yes but what is happening is im setting transparent border and the box background is coming through.

    # December 21, 2012 at 12:51 pm

    because the transparent border is just that….transparent..

    I’m slightly confused, that black background you have in your image isn’t the actual background you’re using for your site, correct?

    # December 21, 2012 at 12:58 pm

    This will help you – http://jsfiddle.net/cszLX/

    # December 22, 2012 at 3:37 am

    Correct @ChrisP

    # December 22, 2012 at 3:47 am

    @Watson90 Thanks just what i was looking for and a bit nicer. But what part makes the triangle in that please?

    # December 22, 2012 at 6:20 am

    You know what @Htmlmainiac I’m not too good with pseudo elements myself and it still confuses me on what makes it look like a transparent triangle. I need to learn how to use the `:before` and `:after` effectively still. Hopefully someone else could explain to you (and me)

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".