Use CSS to implement diamond-shaped images, diagonal stripe backgrounds

Relatively simple diamond Picture: The effect is as follows

Code section:

<div class= "D1" >    </div>. d1{margin-left:100px        ;        Display:inline-block;        Transform:rotate (45deg);        Overflow:hidden;    }    . d1>img {        max-width:100%;        max-height:100%;        Transform:rotate ( -45deg) scale (1.42);  }

　　

The background principle of diagonal stripes is similar but the steps are different:

The first step: we want to achieve the following effect:

CSS section: We have at least four textures to create//* * * Here the 0 refers to the end of the previous color of the place * * *

. d3 {
    Background:linear-gradient (#fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);       

    background-size:100% 30px;   Using background-size Sizing

    Background-repeat:no-repeat;  

}

　　

Second step: Using Tansform to rotate the background, the effect is as follows: Then use the default tile:

CSS section:

. d4 {
    Background:linear-gradient (45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
    background-size:40px 40px;
}

　

But the above method only achieves a 45-degree diagonal stripe background When this method is in the case of 60 degrees, the following occurs:

Because of the change in the degree, we need to recalculate each repeat color block size, but the general idea is clear, and then the following is the ultimate solution:

No matter whether it's 60 degrees or 75 degrees or other specified tilt values, it's easy to handle.

60deg 75deg

. d5 {        background:repeating-linear-gradient (75deg, #fb3, #fb3 15px, #58a 0, #58a 30px);        /* Finally easier way to repeating-linear-gradient tiling linear gradients */  }

　　

　　

Use CSS to implement diamond-shaped images, diagonal stripe backgrounds