0

I am attempting to manipulate a div with css to avoid using an image to mimic the one below. So far I have it skewed, but is there any way to grab a corner and position it below the horizontal line? The shape appears to be a square with the lower left corner a tad bit skewed. I cant seem to figure out how to pull that one corner with out skewing the top corner as well.

skewed div shsape

Heres what I have so far: 

.educationcontentdiv {
background-color: #f9da0b;
padding: 30px;
-webkit-transform: skewY(1deg);
-moz-transform: skewY(1deg);
-ms-transform: skewY(1deg);
-o-transform: skewY(1deg);
transform: skewY(1deg);

}

I have also tried to only skew the one side and it works well, but the corner is still on the same line as its opposing side: 

margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
     -o-transform: skew(20deg);
background: red;
overflow:hidden;
position:relative;

Any Help would be appreciated

Brian Lewis
  • 3
  • 1
  • Related - http://stackoverflow.com/questions/19761202/css3-transform-skew-one-side – Paulie_D Apr 13 '16 at 20:13
  • probably some mix of 2D and 3D transform... Pick up a piece of paper, put a light behind you, and rotate the paper till the shadow looks like what you want is my suggestion.... 'cause I'm not quite sure I follow what exactly your goal looks like. – abluejelly Apr 13 '16 at 20:33
  • It would be a 2d transform of sorts, Im trying to target individual corners of a div and move them around without effecting other corners of the shape. – Brian Lewis Apr 13 '16 at 20:37

1 Answers1

0

This looks like what you might be looking for: Matrix transformation

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

SuperFLEB
  • 204
  • 2
  • 11