0

As the question follows. I am trying to make the content, which in this case is a image inside a div that is supposed to be skewed. With other words, the div should be skewed and the image inside of it not.

I am using:

-ms-transform: skew(-15deg, 0deg);
-webkit-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
  • 1
    Possible duplicate of [How to use skew only in the parent element?](https://stackoverflow.com/questions/13027357/how-to-use-skew-only-in-the-parent-element) – CBroe Nov 23 '17 at 13:30

1 Answers1

0

Just add the opposite value to the child. So add the following to the image:

/* positive 15deg */
-ms-transform: skew(15deg, 0deg);
-webkit-transform: skew(15deg, 0deg);
transform: skew(15deg, 0deg);

EDIT:

Here's a working demo.

evilReiko
  • 19,501
  • 24
  • 86
  • 102
  • Thanks for reply. I did try this before and now again but it makes the use of the command useless since it resets it so the div is not skewed too. –  Nov 23 '17 at 13:48
  • The image you're talking about is `` or background-image in the div? – evilReiko Nov 23 '17 at 14:08
  • which is inside the
    –  Nov 23 '17 at 14:10
  • This is really strange, because I have it like that and the image just resets back to normal when I remove the minus from the child. –  Nov 23 '17 at 14:24
  • Of course you need to name them, use id and class as you like. But in that link, your div has id "skew", while in the css you used the wrong id which is `#div`, it should be `#skew` – evilReiko Nov 23 '17 at 14:29
  • Yeah saw that, i edited my post. So I tried putting in my stuffs in the jsfiddle and it worked all fine, but it doesnt work when I try it in my browser. –  Nov 23 '17 at 14:32
  • You probably gave wrong id or class in the html or css. Fix that, then it should work as expected – evilReiko Nov 23 '17 at 14:35
  • Can you see anything wrong? Because I can't: https://gyazo.com/ff21ba7307d6adc51937f807f6c97fff –  Nov 23 '17 at 14:43
  • That's seems correct, but without having the full source code, it's difficult to tell what's wrong – evilReiko Nov 23 '17 at 14:51
  • Thanks for help evilReiko! My class id was "active". IM **** DONE. –  Nov 23 '17 at 15:05
  • Nevermind, it wasnt that. Here is my full code where it doesnt work: https://gyazo.com/e2c44837b1015c9768da115274b36497 –  Nov 23 '17 at 15:14