How to implement wavy border css

How to implement wavy borders in css: first create a new div and give it a class name; then set a background color and set the div to white; then use the pseudo element before to set it and insert a gradient Color shape; finally add size to divide the graphics, and add triangles to achieve the wave effect.

The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.

Recommended: "css video tutorial"

Implementation of wavy border css

1. Create a new div and Give it a class name

<div class="zigzag"></div>

2. Set a background color and set the div to white

body {
    margin: 0;
    padding: 0;
    background: lightblue;
}
.zigzag {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 50%;
    background: #fff;
}

3. Use the pseudo element before to set it and insert a shape with a gradient color.

.zigzag:before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    display: block;
    background: linear-gradient(
        -45deg, transparent 33.33%,
        lightblue 33.33%, lightblue 66.66%,
        transparent 66.66%
        );
}

#4. Add size to divide the graphics.

background-size: 30px 60px;

5. Add a triangle with a positive 45-degree angle.

linear-gradient(
 45deg, transparent 33.33%,
 lightblue 33.33%, lightblue 66.66%,
 transparent 66.66%
);

#6. Rotate the triangle, and waves will appear at this time.

transform: rotateX(180deg)

The above is the detailed content of How to implement wavy border css. For more information, please follow other related articles on the PHP Chinese website!