css斜切角斜边倒角-CFANZ编程社区

css斜切角斜边倒角

css斜切角斜边倒角_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>

css斜切角斜边倒角_html_02

<!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>

0 条评论

css斜切角 斜边 倒角

css斜切角斜边倒角