Learning and using CSS gradient

Time:2022-3-24

1. Linear gradient implementation: stripe background

Learning and using CSS gradient

<style type="text/css">
.horizontal-stripes{
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    color: #fff;
    /*Principle: #f60 accounting for 50%, from 0% ~ 50% are pure #f60;
    The gradient starts at 50% of #f60 (start color) and ends at 50% of #333 (end color), so it is equivalent to no transition;
    There is 50% left between the start color and the end color, and the remaining 50% area is evenly distributed according to the end color*/
    background-image: linear-gradient(#f60 50%, #333 50%);
    background-size: 100% 20px;
}
    
.veritcal-stripes{
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    color: #fff;
    background-image: linear-gradient(to right, #f60 50%, #333 50%);
    background-size: 20px 100%;
}
</style>

<body>
    < div class = "horizontal stripes" > horizontal stripes < / div >
    < div class = "veritcal stripes" > vertical stripes < / div >
</body>

2. Linear gradient implementation: oblique border at the bottom of the receiving address

Learning and using CSS gradient

In fact, this frame is not perfect. After adjusting the height, it will turn into the following figure. If there are experts who know how to solve it, please give some advice:
Learning and using CSS gradient

<style>
    .box{
        position: relative;
        width: 50%;
        height: 150px;
        margin: 50px auto;
        background-color: #eee;
    }
    .box::after{
        position: absolute;
        bottom: 0;
        left: 0;
        content: ' ';
        width: 100%;
        height: 4px;
        background-image: repeating-linear-gradient(-45deg, 
                                                    #ff6c6c 0, #ff6c6c 20%, 
                                                    transparent 20%, transparent 25%, 
                                                    #1989fa 25%, #1989fa 45%, 
                                                    transparent 45%,transparent 50%);
        background-size: 140px;
    }
</style>

<body>
    <div class="box"></div>
</body>

3. Linear gradient implementation: box corner cutting effect

Learning and using CSS gradient

<style>
.box1{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /* background-color: #ccc; */
    background-image: linear-gradient(-45deg, transparent 15px, #ccc 0);
}
    
.box2{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /*Principle: define two backgrounds and rotate them 45 degrees, one corner to the left and one corner to the right*/
    background-image: linear-gradient(45deg, transparent 15px, #ccc 0),
                        linear-gradient(-45deg, transparent 15px, #ccc 0);
    /*The background width is set to 50% and the height is adaptive*/
    background-size: 50% 100%;
    /*Sets the position of the two backgrounds*/
    background-position: left bottom, right bottom;
    /*Duplicate background is not allowed*/
    background-repeat: no-repeat;
}
    
.box4{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(135deg, transparent 15px, #ccc 0),
                        linear-gradient(-135deg, transparent 15px, #ccc 0),
                        linear-gradient(45deg, transparent 15px, #ccc 0),
                        linear-gradient(-45deg, transparent 15px, #ccc 0);
    background-size: 50% 50%;
    background-position: left top, right top, left bottom, right bottom;
    background-repeat: no-repeat;
}
</style>

<body>
    < div class = "box1" > 1 chamfer < / div >    
    < div class = "box2" > 2 chamfer < / div >
    < div class = "Box4" > 4 corners < / div >
</body>

4. Linear gradient implementation: inscribed triangle effect

Learning and using CSS gradient

<style>
.inscribed-triangle{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /*Principle: define two gradients. Both gradients are one and a half of the triangle, one to the left and the other to the right,
    Two gradients are combined into a triangle. The size of the triangle is determined by the size of the transparent in the gradient*/
    background-image: linear-gradient(-45deg, transparent 15px, #ccc 0),
                        linear-gradient(45deg, transparent 15px, #ccc 0);
    background-size: 50%;
    /*Set the position of two backgrounds. The first background can be at position 0, and the second background needs to be on the right*/
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}
</style>

5. Linear gradient implementation: bottom sawtooth effect

Learning and using CSS gradient

<style>
.Jagged{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /*Principle: define two gradients. Both gradients are one and a half of the triangle, one to the left and the other to the right,
    Two gradients are combined into a small triangle. Set the horizontal background width to 20, and then set the horizontal repeat*/
    background-image: linear-gradient(-45deg, transparent 15px, #ccc 0),
                        linear-gradient(45deg, transparent 15px, #ccc 0);
    background-size: 20px;
}
</style>

<body>
    < div class = "jagged" > bottom jagged effect < / div >
</body>

6. Radial gradient implementation: circular corner cutting effect

Learning and using CSS gradient

<style>
.radial-box1{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    background-image: radial-gradient(circle at right bottom, transparent 15px, #ccc 0);
}

.radial-box2{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /*Principle: one fillet to the left and one fillet to the right*/
    background-image: radial-gradient(circle at left bottom, transparent 15px, #ccc 0),
                        radial-gradient(circle at right bottom, transparent 15px, #ccc 0);
    /*The background width is set to 50% and the height is adaptive*/
    background-size: 50%;
    /*The position of the first background is at 0, and the x-axis of the second background needs to be at 100%, because the background width has been set to 50%, and the percentage of the background position is calculated according to the background width;
    If the background position is not set, the two backgrounds will overlap, so that there is no fillet and the background is only half*/
    background-position: 0 0, 100% 0;
    /*Duplicate background is not allowed*/
    background-repeat: no-repeat;
}

.radial-box4{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /*Principle: define 4 circles*/
    background-image: radial-gradient(circle at left top, transparent 15px, #ccc 0),
                        radial-gradient(circle at right top, transparent 15px, #ccc 0),
                        radial-gradient(circle at left bottom, transparent 15px, #ccc 0),
                        radial-gradient(circle at right bottom, transparent 15px, #ccc 0);
    /*Set the width of the upper background to 50%, or set the height of the lower background to 50%*/
    background-size: 50% 50%;
    /*Set the position of 4 circles*/
    background-position: 0 0, 100% 0, 0 100%, 100% 100%;
    /*Duplicate background is not allowed*/
    background-repeat: no-repeat;
}

</style>

<body>
    < div class = "radial-box1" > 1 fillet
    < div class = "radial-box2" > 2 fillet corners < / div >
    < div class = "radial-box4" > 4 fillet corners < / div >
</body>

7. Radial gradient: coupon effect

Learning and using CSS gradient

<style>
.coupon{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    background: radial-gradient(circle at right top, transparent 15px, #f60 0) 0 0 / 40% 50%,
                radial-gradient(circle at right bottom, transparent 15px, #f60 0) 0 100% / 40% 50%,
                radial-gradient(circle at left top, transparent 15px, #ccc 0) 100% 0 / 60% 50%,
                radial-gradient(circle at left bottom, transparent 15px, #ccc 0) 100% 100% / 60% 50%;
    background-repeat: no-repeat;
}
</style>

<body>
    < div class = "coupon" > coupon effect < / div >
</body>