波線枠CSSの実装方法

CSS で波状の境界線を実装する方法: 最初に新しい div を作成し、それにクラス名を付けます。次に、背景色を設定し、div を白に設定します。次に、その前に疑似要素を使用して設定し、グラデーション カラーシェイプ。最後にサイズを追加してグラフィックスを分割し、三角形を追加して波の効果を実現します。

このチュートリアルの動作環境: Dell G3 コンピューター、Windows 7 システム、HTML5&&CSS3 バージョン。

推奨: "css ビデオ チュートリアル "

波状ボーダー css の実装

1. 新しい div を作成して与えるクラス名

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

2。背景色を設定し、div を白

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

3 に設定します。前に擬似要素を使用して設定し、グラデーション カラーの図形を挿入します。

.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. グラフィックを分割するサイズを追加します。

background-size: 30px 60px;

5. 正の 45 度の角度を持つ三角形を追加します。

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

#6. 三角形を回転させると波が現れます。

rreeee

以上が波線枠CSSの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。