CSS写一个缺角的div

简介: CSS写一个缺角的div

今天用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>
相关文章
|
7月前
|
前端开发
CSS div隐藏滚动条
CSS div隐藏滚动条
41 0
N..
|
1月前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
38 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
21 0
|
2月前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
26 1
|
9月前
|
前端开发
DIV+CSS文字与图片上下垂直居中-div css居中
DIV+CSS文字与图片上下垂直居中-div css居中
43 0
|
4月前
|
前端开发
css 实现 div 宽高同比
css 实现 div 宽高同比
|
4月前
|
前端开发
CSS div 水平排列
CSS div 水平排列
|
5月前
|
前端开发
css设置div水平居中
css设置div水平居中
|
5月前
|
Web App开发 设计模式 前端开发
DIV+CSS布局总结
DIV+CSS布局总结