CSS特殊样式（一）模拟波浪线+矩形切割

最新推荐文章于 2024-04-19 14:20:16 发布

front_end_fan

最新推荐文章于 2024-04-19 14:20:16 发布

阅读量7.7k

点赞数

分类专栏：纯CSS 文章标签： CSS特殊样式模拟波浪线圆弧

本文链接：https://blog.csdn.net/qq_39198420/article/details/73613728

版权

纯CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*例一*/
        .eg1:before{
            content: '';
            position: absolute;
            z-index: 1000;
            top:50%;
            transform: translate(-50%,-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #fff;
           box-shadow: 4px 0 0 #ddd;
        }
        .eg1{-webkit-perspective: 180;}
        .eg1:after{
            content: '旋转';
            position: absolute;
            z-index: 1000;
            top:13%;
            left: 64%;
            transform:  rotateY(-65deg);
            width: 100px;
            height: 60px;
            background: #F8B551;
            box-shadow: 3px 0 0 #eee;
            /*transform: ;*/
        }
        /*例二*/
        .eg2:after{
            color: #ddd;
            font-size: 5px;
            content: '可旋转为水平波浪线';
            position: absolute;
            width: 10px;
            height: 100%;
            z-index: 1000;
            right: 0%;
            background: #fff;
            background-size: 2rem .66rem;
            /*transform:  rotate(-90deg);*/
            background-image:linear-gradient(-45deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-135deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#e5004f 75%),linear-gradient(-135deg,transparent 75%,#e5004f 75%);
        }
    </style>
</head>
<body>
    <div class="eg1" style="width: 300px;height: 80px;background: #378AE8;position: relative;overflow:hidden;"></div>
    <hr/>
    <div class="eg2" style="width: 300px;height: 80px;background: #e5004f;position: relative;"></div>
</body>
</html>

front_end_fan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS特殊样式（一）模拟波浪线+矩形切割

html>html>head lang="en"> meta charset="UTF-8"> title>title> style> /*例一*/ .eg1:before{ content: ''; position: absolute; z-index: 1000
复制链接

扫一扫