切断边框效果

Question

我正在尝试在浏览器的两个点上实现截断边框。左上角和右上角。我试图让黑色边框不缩放。这意味着部件始终保持相同的宽度/高度，同时还在底部留下额外的 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>

Answer 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;
}

<div class="box"> some text </div>

使用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%);
}

<div class="box"> some text </div>

切断边框效果

Cut off Border effect

html

css

responsive-design

clip-path