如何用CSS写一个缺角的div(附源码)

636 阅读1分钟

今天用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>