Grow your CSS skills. Land your dream job.

:after relative to content not div?

  • # November 15, 2012 at 11:31 am

    So I am trying to have a skewed edge on a div. I was disappointed to find out that the :after selector is relative to the content and not to the element itself. Unless I am doing something wrong. Am I?

    Here is the test :
    http://jsfiddle.net/ybWwR/

    Any ideas how to solve this problem?

    -Kim

    # November 15, 2012 at 11:59 am

    Here you go. http://codepen.io/anon/pen/jnGCb

    Position: absolute is one way.

    # November 15, 2012 at 12:05 pm

    That worked! Thank you.

    # November 15, 2012 at 5:00 pm

    @Paulie_D nailed it, although I would recommend making one change: rather than using a magic number (left: 260px;), use the right property and offset it equal to the width of the traingle:

    right: -50px;

    That way the triangle will line up perfectly no matter how wide the div is.

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

You must be logged in to reply to this topic.

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