Comment implémenter le CSS à bordure ondulée

Comment implémenter des bordures ondulées en CSS : créez d'abord un nouveau div et donnez-lui un nom de classe ; puis définissez une couleur d'arrière-plan et définissez le div sur blanc, puis utilisez le pseudo-élément avant de le définir et insérez un ; Forme de couleur dégradée ; ajoutez enfin de la taille pour diviser les graphiques et ajoutez des triangles pour obtenir l'effet de vague.

L'environnement d'exploitation de ce tutoriel : ordinateur Dell G3, système Windows 7, version HTML5&&CSS3.

Recommandé : "Tutoriel vidéo CSS"

Implémentation du CSS à bordure ondulée

Créer un nouveau div, et Donnez-lui un nom de classe

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

2. Définissez une couleur d'arrière-plan et définissez le div sur blanc

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

3. Utilisez le pseudo-élément avant de le définir et insérez une forme avec une couleur dégradée.

.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. Ajoutez de la taille pour diviser les graphiques.

background-size: 30px 60px;

5. Ajoutez un triangle avec un angle positif de 45 degrés.

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

6. Faites pivoter le triangle et des vagues apparaîtront.

transform: rotateX(180deg)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!