<div class="box">
  <div class="bg"></div>
  <div class="content">11111</div>
</div>
:root {
  --bdw: 2.5px;
}
html {
  background-image : url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/RedCat_8727.jpg/1200px-RedCat_8727.jpg);
  background-size: cover;
}

.box {
  position:relative;
  padding: var(--bdw);
  width: 400px;
  height: 100px;
}

.box .content {
  color: white;
}

.box .bg {
  position:absolute;
  top:0; left:0;
   width: 100%;
  height: 100%;
 clip-path: polygon(0% 0%, 0% 100%, calc(var(--bdw)) 100%, calc(var(--bdw)) calc(var(--bdw)), calc(100% - var(--bdw)) calc(var(--bdw)), calc(100% - var(--bdw)) calc(100% - var(--bdw)), 0 calc(100% - var(--bdw)), calc(var(--bdw)) 100%, 100% 100%, 100% 0%);
  background: linear-gradient(150deg, #b3a97f 38%, transparent 40%, transparent 83%, #b3a97f 85%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.