如何用CSS写一个缺角的div（附源码）

最新推荐文章于 2023-04-13 00:14:37 发布

刺心疯

最新推荐文章于 2023-04-13 00:14:37 发布

阅读量4k

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_42363090/article/details/100578331

版权

HTML5 专栏收录该内容

201 篇文章 10 订阅

订阅专栏

今天用CSS写一个缺角的div，大致的效果是这样的，div的左上角和右上角缺掉了一块的效果，简称为缺角div

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box {
                width: 900px;
                height: 50px;
                background: linear-gradient(-145deg, transparent 11px, #0b2b5f 0) right, linear-gradient(145deg, transparent 11px, #0b2b5f 0) left;
                background-size: 50% 100%;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

刺心疯

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何用CSS写一个缺角的div（附源码）

今天用CSS写一个缺角的div，大致的效果是这样的，div的左上角和右上角缺掉了一块的效果，简称为缺角div<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
复制链接

扫一扫