欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

波浪的边框css怎么实现

程序员文章站 2022-04-04 10:12:42
...

css实现波浪边框的方法:首先新建一个div,并给它一个类名;然后设置一个背景颜色,并将div设为白色;接着使用伪元素before进行设置,并插入有渐变颜色的形状;最后加上尺寸进行图形的分割,并增加三角形实现波浪效果即可。

波浪的边框css怎么实现

本教程操作环境: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%
        );
}

波浪的边框css怎么实现

4、加上尺寸进行图形的分割。

background-size: 30px 60px;

波浪的边框css怎么实现

5、增加正45度角的三角形。

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

波浪的边框css怎么实现

6、对三角形进行旋转,这个时候就有波浪显现了。

transform: rotateX(180deg)

波浪的边框css怎么实现

以上就是波浪的边框css怎么实现的详细内容,更多请关注其它相关文章!

相关标签: css