css斜切角斜边倒角

最新推荐文章于 2024-07-11 15:39:54 发布

徐同保

最新推荐文章于 2024-07-11 15:39:54 发布

阅读量1w

点赞数 2

分类专栏： web前端前端技术分享文章标签： css斜切角斜边倒角

本文链接：https://blog.csdn.net/xutongbao/article/details/83305839

版权

web前端同时被 2 个专栏收录

735 篇文章 16 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>css斜切角 斜边 倒角</title>
    <style>
    .m-test {
        width: 100px;
        height: 16px;
        background: linear-gradient(135deg, transparent 5px, #1e1e1e 0) top left,
            linear-gradient(-135deg, transparent 0px, #1e1e1e 0) top right,
            linear-gradient(-45deg, transparent 0px, #1e1e1e 0) bottom right,
            linear-gradient(45deg, transparent 5px, #1e1e1e 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
    </style>
</head>

<body>
    <div class="m-test"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>css斜切角 斜边 倒角</title>
    <style>
    .m-test {
        width: 100px;
        height: 16px;
        background: linear-gradient(135deg, transparent 5px, #1e1e1e 0) top left,
            linear-gradient(-135deg, transparent 0px, #1e1e1e 0) top right,
            linear-gradient(-45deg, transparent 0px, #1e1e1e 0) bottom right,
            linear-gradient(45deg, transparent 5px, #1e1e1e 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
    </style>
</head>
 
<body>
    <div class="m-test"></div>
</body>
 
</html>