CSS波浪线

最新推荐文章于 2024-08-06 15:15:40 发布

阿赛工作室

最新推荐文章于 2024-08-06 15:15:40 发布

阅读量760

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_25753445/article/details/130991808

版权

<html>

<head>
    <style>
        body {
            background-color: lightblue;
        }


        .wavyText {
            position: relative;
            word-break: keep-all;
            white-space: nowrap;
            line-height: 2em;
        }

        .wavyText::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 0.8em;
            bottom: -0.8em;
            background:
                linear-gradient(135deg, transparent, transparent 45%, #169BD5, transparent 55%, transparent 100%),
                linear-gradient(45deg, transparent, transparent 45%, #169BD5, transparent 55%, transparent 100%);
            background-size: 1.6em 1.6em;
            background-repeat: repeat-x, repeat-x;
            left: 0;
        }
    </style>
</head>

<body>

    <div>
        <span>我不是波浪线，</span>
        <span class="wavyText">
            我是波浪线,我是波浪线,我是波浪线,我是波浪线.
        </span>
        <span>我不是波浪线，</span>
        <span class="wavyText">
            我是波浪线,我是波浪线,我是波浪线,我是波浪线.
        </span>
    </div>
</body>

</html>