首页 / 编程 CSS3实现边框锯齿效果

CSS3实现边框锯齿效果

原创分类：编程 2023-3-2 09:22 阅读量：2190

好看的边框锯齿是怎么实现的，你知道吗？

css实现锯齿边框

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现锯齿边框</title>
</head>
<style>
    body {
        background-color: #efefef;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    .container {
        width: 100%;
        height: 300px;
        background-color: #fff;
    }

    .wavy_line::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 20px;
        display: block;
        background: linear-gradient(-45deg, transparent 33.33%, white 33.33%, white 66.66%,
                transparent 66.66%), linear-gradient(45deg, transparent 33.33%, white 33.33%, white 66.66%, transparent 66.66%);
        background-size: 30px 60px;
        transform: rotateX(180deg);
    }

    .wavy_line {
        height: 20px;
    }
</style>

<body>
    <div class="container"></div>
    <div class="wavy_line"></div>
</body>

</html>

上一篇：jquery点击事件失效原因和解决办法