.stamp
  .inner
View Compiled
:root {
  --w: 400px;
  --h: 400px;
  --cut-size: calc(var(--w) / 8);
  --shadow-size: 6px;
  --shadow-color: #ffa4b1;
  --bg-color: #86abff;
  --hl-color: #eef2fe;
  --img-url: url(https://cdn.dribbble.com/users/295355/screenshots/3314912/gameboyv3.jpg);
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
}
.stamp {
  width: var(--w);
  height: var(--h);
  position: relative;
  background-color: var(--hl-color);
  filter: drop-shadow(
    var(--shadow-color) var(--shadow-size) var(--shadow-size)
  );
  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(
        transparent 0,
        transparent 50%,
        var(--hl-color) 50%,
        var(--hl-color) 100%
      )
      calc(-0.5 * var(--cut-size)) calc(-0.5 * var(--cut-size)) /
      var(--cut-size) var(--cut-size),
    linear-gradient(0deg, var(--hl-color) 0, var(--hl-color) 100%) center center /
      calc(var(--w) - var(--cut-size)) calc(var(--h) - var(--cut-size))
      no-repeat;
}

.inner {
  background: var(--img-url) center no-repeat;
  background-size: cover;
  width: calc(100% - 1.5 * var(--cut-size));
  height: calc(100% - 1.5 * var(--cut-size));
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.