<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%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.