CSS Parallelogram and diamond transformations

Parallelogram

The parallelogram structure can be pulled diagonally based on the deformation properties of the rectangle through skew () (the coordinate system used by the skew, the x-axis vertically, and the y-axis, in contrast to the common coordinate system).

<! DOCTYPE html>
But the content tilt may not be the effect we need, a general solution is to nest a div inside the inner layer, and then add a transform:skewx (45deg) in the opposite direction, but someone with a code cleanliness says accept it.
Another idea is to apply all the styles to the pseudo-elements. The pseudo-elements are then deformed.
<! DOCTYPE html>
This not only solves the problem of content skew, but also the HTML structure is as clean as before. Note, however, that the pattern generated by the pseudo-element overlaps the content, and once the background is set, it obscures the content, so add Z-index:-1.
Diamond Picture
If it is on the basis of a square, the diamond is a square pattern rotated 45 degrees of graphics. It's easy to think of rotating the outer div 45 degrees and then rotating the inner IMG back 45 degrees. Get the following pattern.
<! DOCTYPE html>
It's a pretty nice octagonal shape, and if you can persuade the product manager, the job is done. Well, I guess you can't persuade ...
Because the rotation is inconsistent, the outer div intercepts the excess (note overflow:hidden) and then the part is empty. Just fill out the empty part is the diamond, here you can draw a sketch with the Pythagorean theorem calculation.
The result is a magnification of 1.42 times times the fill completely. We changed the Transform property of IMG to Transform:rotate (45deg) scale (1.42);
　　
One drawback of this scheme is that when the original is not a square, a larger magnification factor is needed, and the captured picture is more limited.
And the scheme itself is not simple and elegant. Here we introduce an attribute Clip-path (which unfortunately does not seem to be good), which can be clipped to any polygon by passing in a fixed position.
　　
<! DOCTYPE html>
I hope that in the near future Clip-path this attribute will be better supported in the various viewers.
(reproduced): http://www.cnblogs.com/sharpall/p/6113377.html
CSS Parallelogram and diamond transformations