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?
@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.
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
Here you go. http://codepen.io/anon/pen/jnGCb
Position: absolute is one way.
That worked! Thank you.
@Paulie_D nailed it, although I would recommend making one change: rather than using a magic number (
left: 260px;), use therightproperty and offset it equal to the width of the traingle:That way the triangle will line up perfectly no matter how wide the
divis.