Home > Article > Web Front-end > 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!