html - 在特殊斜 Angular css 形状周围创建边框？

Question

我想创建一个围绕斜 Angular 的边框，如下所示。

我用于创建斜 Angular 的当前代码是:

.contact {
    flex-grow: 2;
    z-index: 2;
    position:relative;
    display: block;
    margin: 40px 40px;
    padding: 60px; 
    text-align: center;
    background-color: #343434;
}

.bevel {
    overflow:hidden;
    clip-path: polygon(
        0 10%,
        10% 0,
        90% 0,
        100% 10%,
        100% 90%,
        90% 100%,
        10% 100%,
        0% 90%,
        0% 10%);
}

<form id="contact" class="contact bevel">
  <!-- content makes up width and height --!>
</form>

我不知道如何制作边框，我制作斜 Angular 的方式也是一个问题，因为它是百分比而不是像素，这使得它看起来很奇怪。我还需要边框来处理只有一个斜 Angular 的形状。

谢谢

Answer 1

您可以使用剪辑路径和多个背景来实现:

.box {
  --d:30px; /* control the clip-path */
  --b:4px;  /* the border length */
  --c:orange; /* the color */
  
  --gc:var(--c) calc(50% + var(--b)*0.707),#0000 0;
  --gl:var(--c), #0000 40% 60%,var(--c);
  
  
  height:200px;
  margin:50px;
  clip-path:polygon(var(--d) 0,calc(100% - var(--d)) 0,100% var(--d),100% calc(100% - var(--d)),calc(100% - var(--d)) 100%, var(--d) 100%, 0 calc(100% - var(--d)),0 var(--d));
  
  background:
    /* the corners */
    linear-gradient( 135deg, var(--gc)) 0    0   /var(--d) var(--d),
    linear-gradient(  45deg, var(--gc)) 0    100%/var(--d) var(--d),
    linear-gradient( -45deg, var(--gc)) 100% 100%/var(--d) var(--d),
    linear-gradient(-135deg, var(--gc)) 100% 0   /var(--d) var(--d),
    
    /* the lines */
    linear-gradient(90deg, var(--gl)) top   /100% var(--b),
    linear-gradient(90deg, var(--gl)) bottom/100% var(--b),
    linear-gradient( 0deg, var(--gl)) left  /var(--b) 100%,
    linear-gradient( 0deg, var(--gl)) right /var(--b) 100%;
  background-repeat:no-repeat;
  position:relative;
}

<div class="box">

</div>

以及背景层:

.box {
  --d:30px; /* control the clip-path */
  --b:4px;  /* the border length */
  --c:orange; /* the color */
  --s:10px; /* control the space with the background layer*/
  
  --gc:var(--c) calc(50% + var(--b)*0.707),#0000 0;
  --gl:var(--c), #0000 40% 60%,var(--c);
  
  
  height:200px;
  margin:50px;
  clip-path:polygon(var(--d) 0,calc(100% - var(--d)) 0,100% var(--d),100% calc(100% - var(--d)),calc(100% - var(--d)) 100%, var(--d) 100%, 0 calc(100% - var(--d)),0 var(--d));
  
  background:
    /* the corners */
    linear-gradient( 135deg, var(--gc)) 0    0   /var(--d) var(--d),
    linear-gradient(  45deg, var(--gc)) 0    100%/var(--d) var(--d),
    linear-gradient( -45deg, var(--gc)) 100% 100%/var(--d) var(--d),
    linear-gradient(-135deg, var(--gc)) 100% 0   /var(--d) var(--d),
    
    /* the lines */
    linear-gradient(90deg, var(--gl)) top   /100% var(--b),
    linear-gradient(90deg, var(--gl)) bottom/100% var(--b),
    linear-gradient( 0deg, var(--gl)) left  /var(--b) 100%,
    linear-gradient( 0deg, var(--gl)) right /var(--b) 100%;
  background-repeat:no-repeat;
  position:relative;
  z-index:0
}

.box::before {
  content:"";
  position:absolute;
  --d1:calc(var(--d) - var(--s)*0.707);
  inset:var(--s);
  clip-path:polygon(var(--d1) 0,calc(100% - var(--d1)) 0,100% var(--d1),100% calc(100% - var(--d1)),calc(100% - var(--d1)) 100%, var(--d1) 100%, 0 calc(100% - var(--d1)),0 var(--d1));
  background:grey;
}

<div class="box">

</div>

<div class="box" style="--c:red;--d:20px;--b:5px;--s:14px">

</div>