Trim a picture to a diamond image by CSS

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.