<div class="card">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ducimus!
</div>
* {
box-sizing: border-box;
}
body {
background-image: url(https://picsum.photos/id/471/800);
}
.card {
padding: 10px 15px;
width: 200px;
height: 200px;
position: relative;
backdrop-filter: blur(15px);
clip-path: polygon(10px 0, 190px 0, 200px 10px, 200px 190px, 190px 200px, 10px 200px, 0 190px, 0 10px)
}
.card::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: red;
pointer-events: none;
clip-path: polygon(evenodd, 10px 0, 190px 0, 200px 10px, 200px 190px, 190px 200px, 10px 200px, 0 190px, 0 10px, 10px 5px, 190px 5px, 195px 10px, 195px 185px, 185px 195px, 10px 195px, 5px 190px, 5px 10px)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.