Create box with unequal sides

[sarahann]

I am trying to create a rectangle with 4 unequal sides (a quadrilateral) that looks like this:

 

Then eventually animate the corners slightly so the box has some movement. 

 

Any suggestions? I can't seem to find anything in the docs. All I can seem to find is how to expand the size of the box, or translate it.

See the Pen ajXBYq by sarahannnicholson (@sarahannnicholson) on CodePen

[OSUblake]

You really can't make a quad like that with HTML, let alone animate it.

 

You should look into SVG. Here's a good place to start.

http://tutorials.jenkov.com/svg/index.html

 

Really simple example of animating a <polygon>

 

See the Pen oMmYPa by osublake (@osublake) on CodePen

 

 

 

This post shows another way to animate a <polygon>. It's more advanced, but allows you to animate each corner independently.

 

 

 

See the Pen gvBvjZ by osublake (@osublake) on CodePen