波浪的邊框css怎麼實現

css實作波浪邊框的方法：先新建一個div，並給它一個類別名稱；然後設定一個背景顏色，並將div設為白色；接著使用偽元素before進行設置，並插入有漸變顏色的形狀；最後加上尺寸進行圖形的分割，並增加三角形實現波浪效果即可。

本教學操作環境：Dell G3電腦、Windows7系統、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、這裡使用偽元素before進行設置，插入有漸層顏色的形狀。

.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、對三角形進行旋轉，這個時候就有波浪顯現了。

transform: rotateX(180deg)

#

以上是波浪的邊框css怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！