css边框裁剪效果代码-html代码-BFW代码库

css边框裁剪效果代码

代码语言：html

代码描述：css边框裁剪效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .box {
          --b:20px;  /* size of cut */
          --a:90deg; /* angle of cut */
          --p:10px;  /* the padding */
          
          --g:#0000 var(--a),#000 0;
          max-width: 220px;    
          padding: calc(var(--b) + var(--p));
          margin: 5px;
          display:inline-block;
          box-sizing: border-box;
          background:linear-gradient(45deg,pink,lightblue);
          -webkit-mask:
            conic-gradient(from calc(var(--a)/-2 -  45deg) at top    var(--b) left  var(--b),var(--g)) 0    0,
            conic-gradient(from calc(var(--a)/-2 +  45deg) at top    var(--b) right var(--b),var(--g)) 100% 0,
            conic-gradient(from calc(var(--a)/-2 - 135deg) at bottom var(--b) left  var(--b),var(--g)) 0    100%,
            conic-gradient(from calc(var(--a)/-2 + 135deg) at bottom var(--b) right var(--b),var(--g)) 100% 100%;
                  mask:
            conic-gradient(from calc(var(--a)/-2 -  45deg) at top    var(--b) left  var(--b),var(--g)) 0    0,
            conic-gradient(from calc(var(--a)/-2 +  45deg) at top    var(--b) right var(--b),var(--g)) 100% 0,
            conic-gradient(from calc(var(--a)/-2 - 135deg) at bottom var(--b) left  var(--b),var(--g)) 0    100%,
            conic-gradient(from calc(var(--a)/-2 + 135deg) at bottom var(--b) right var(--b),var(--g)) 100% 100%;
          -.........完整代码请登录后点击上方下载按钮下载查看