Trim a picture to a diamond image by CSS

In the web design, the picture cut into a diamond-shaped picture display is a common demand, through Photoshop directly cut a picture into a diamond is a solution, but not the best solution, where the author directly through the design of CSS two schemes to achieve the picture diamond display.
Take the following picture for example:

We want this picture to show the diamond effect, here is not to let the picture directly through the rotate to rotate to achieve, directly let the picture rotation, the picture of the content is tilted. The effect map We want is this:

Here are two ways of doing this.
First type:

<div class= "Picture" >
    
</div>

. picture{
    width:100px;
    Transform:rotate (45deg);
    Overflow:hidden
}
. picture>img{
    max-width:100%;
    Transform:rotate ( -45deg) scale (1.42);
}

Here to use two tags, pay attention to the inner layer of the picture after the rotation of the scale to enlarge the processing, otherwise there will be eight side-shaped appearance.
The second type:
This method is more intuitive and effective, and the effect is better.
Or take the picture in the above label as an example, here only the IMG tag, and only need this one tag, by adding the following style to this IMG tag can be achieved:

Clip-path:polygon (50% 0, 100% 50%, 50% 100%, 0 50%);

Only need to add this one style can achieve the same effect as the first scenario, and take this solution, also can be perfect processing of non-square picture, make it a diamond picture display, the first scheme in the processing of non-square picture is problematic.
Here to add a small trick, through the Clip-path properties, and then with animation, you can achieve the effect of the diamond-shaped image restoration, the code is as follows:

img{
    Clip-path:polygon (50% 0, 100% 50%, 50% 100%, 0 50%);
    Transition:1s clip-path;
}
img:hover{
    Clip-path:polygon (0 0, 100% 0,100% 100%,0 100%);

When the mouse hovers over the picture, the picture will be smoothly expanded into a complete picture, which the reader can try.