Using CSS3 linear-gradient to implement the shopping cart address selection envelope Effect instance

For the CSS3 of the gradient front of the children's shoes must not be unfamiliar, in some e-commerce website will be to beautify the address choice to make an envelope style (personal feeling very porridge ~), looked at its implementation, most of it is in the form of pictures, holding an optimized mentality to try to use CSS3 Linear-gradient implementing the Envelope effect is

Here we go

The HTML structure is as follows:

<p class= "Letter-box" >
<p class= "Letter-border" >

</p>
</p>

CSS styles are as follows:

. letter-box{
width:278px;
height:176px;
padding:5px;
Box-sizing:border-box;
}
. letter-border{
width:100%;
height:100%;
Background: #fbfaf5;
}

The gradient is written on the Letter-box, and then the Letter-border is obscured by the color of the middle part.

Next we write the gradient to the Letter-box, first of all, we first analyze the top of the gradient actually a total of three colors white, red and blue. We all know that when using linear-gradient, in addition to the beginning of the definition of the angle of the gradient we also define the color and color of the proportion of the color we now know, then we now say how to determine the ratio.

Observation we can find the rule a red, a white, a blue, a white for a cycle, then our law number is 4, our proportion with 100%/(our law number *) =12.5% is our proportion. Explain why we have to use our regular number, should not be the rule number is a combination? No! put the color of a combination number in a cube inside, in order to facilitate everyone to understand P has a

This is supposed to be intuitive. We think of the big box as repeat in small cubes.

. letter-box{
width:278px;
height:176px;
padding:5px;
Box-sizing:border-box;
Background:linear-gradient (45deg, #f25953 12.5%, #fbfaf5 12.5%, #fbfaf5 25%, #5590d6 25%, #5590d6 37.5%, #fbfaf5 37.5%,# Fbfaf5 50%, #f25953 50%, #f25953 62.5%, #fbfaf5 62.5%, #fbfaf5 75%, #5590d6 75%, #5590d6 87.5%, #fbfaf5 87.5%, #fbfaf5 100%);
background-size:70px 70px;
}