切断边框效果

【问题标题】：Cut off Border effect切断边框效果
【发布时间】：2020-08-30 10:51:17
【问题描述】：

我正在尝试在浏览器的两个点上实现截断边框。左上角和右上角。我试图让黑色边框不缩放。这意味着零件始终保持相同的宽度/高度，同时还在底部留下额外的 7% vh。目前我正在使用剪辑路径。我试图在不使用 svg 的情况下做到这一点谢谢！

body {
  margin: 0;
  padding: 0;
}

.section2 {
  background: white;
  height: 100vh;
  width: 100vw;
  clip-path: polygon(1px 9px, 99% 1px, 100% 99%, 1% 100%);
}

.section1 {
  background: black;
  height: 93vh;
  width: 100vw;
}

header {
  padding: 10px;
}

<div class="section1">
  <div class="section2">
    <header>
      Zebra
    </header>

  </div>
</div>

【问题讨论】：

标签： html css responsive-design clip-path

【解决方案1】：

你可以试试下面这样的多重背景：

.box {
  margin:10px;
  height:300px;
  background:
    linear-gradient(to top    left,transparent 47%,#000 50%) top   /100% 10px,
    linear-gradient(to bottom left,transparent 47%,#000 50%) left  /10px 100%,
    linear-gradient(to top   right,transparent 47%,#000 50%) right /10px 100%;
  background-repeat:no-repeat;
  padding:10px;
}

&lt;div class="box"&gt; some text &lt;/div&gt;

clip-path 可以像下面这样完成

.box {
  margin:10px;
  height:300px;
  padding:10px;
  position:relative;
  z-index:0;
}
.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:10px solid #000;
  clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 10px) 1px,1px 10px,10px 100%, 0 100%);
}

&lt;div class="box"&gt; some text &lt;/div&gt;

【讨论】：

我该怎么做？