Css3 linear-gradient enables you to select an envelope for the shopping cart address, and lineargradientcss3

Css3 linear-gradient enables you to select an envelope for the shopping cart address, and lineargradientcss3

It is no stranger to the gradient front-end shoes of css3. On some e-commerce websites, the address will be converted into an envelope for beautification (I personally feel quite cool ~), After reading about its implementation method, most of them are in the form of images. With an optimized mindset, I tried to use css3 linear-gradient to implement the envelope effect.

Next let's start ~

The html structure is as follows:

<Div class = "letter-box">
<Div class = "letter-border">

</Div>
</Div>

The css style is 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 the letter-border uses the color to cover the middle part.

Next, we will write a gradient for letter-box. First, we will analyze the gradient above. In fact, there are three colors: white, red, and blue. We all know that in addition to defining the gradient angle at the beginning when using linear-gradient, we also need to define the proportions of colors and colors. We now know the color, now let's take a look at how to determine the ratio.

Observe that we can find a regular Red, a white, a blue, and a white cycle, then our regular number is 4, our proportion is 100%/(our regular number * 2) = 12.5% is our proportion. Why should we use our regular number * 2? Shouldn't it be a combination of regular numbers? NO! Put the color of a combination number in a cube, so that everyone can understand p

This should be very intuitive. we can regard the large box as a repeat in the unit of a small cube.

. 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;
}

In order to achieve the effect, it is not compatible. In actual work, you should remember to add a prefix when using linear-gradient ~