How to transform or distort or skew a rectangular image to fit arbitrary quad
Assume that the center of the square maps to the center of the vertexes.
The vertices in the output are known. Assume they are $(x_1,y_1),...,(x_4,y_4) $
Their center is $ ( \frac{x_1+x_2+x_3+x_4}{4},\frac{y_1+y_2+y_3+y_4}{4}) $
Now you have 4 degrees of freedom of where to put the points where the color change. 
$ ( w_1 x_1 +(1-w_1) x_2 ,w_1 y_1 +(1-w_1 ) y_2 )  $, and so on





Areas of each of the 4 parts equal to the areas of two triangles (Can be calculated analytically)  
All of these together should give you enough constraints to find $w_1,w_2,w_3,w_4$
Once you found the weights, you can create a grid based mapping that transforms squares into the required forms.