How to create a random polygon around two rectangles?

Question

Hi, the above figure explains what I'm trying to achieve. Some things the picture doesn't explain:

1. The smaller rectangle is in the exact middle of the bigger one, so the "padding" is equal on all four sides.
2. The end result I want is the coordinates in percentage to the bigger rectangle. In the picture above the leftmost point of the polygon is ~(0% 30%), while the rightmost point is ~(100% 19%).
3. The polygon need not be a quadrilateral (that is also random).
4. The lines should not go inside the inner rectangle but can touch its edges and points.
5. The polygon can be convex or concave. If both is impossible, then convex is more than enough.

Non-examples:

I need this for a cool HTML effect I wanted to achieve and I am not really able to think of ideas to implement this, so I posted it here (I will move this to StackOverflow if this isn't the right place to ask this question).

Sorry if this is too difficult to understand, I will try to clear any doubts on the question. Any sort of help is greatly appreciated, including something like an algorithm, I can adapt to code.