styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000701;
  padding: 2rem;
}

.container {
  width: 20rem;
  height: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.content {
  width: 99%;
  height: 99%;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(0 4.2%, 0 100%, 100% 100%, 100% 0, 6.9% 0);
  background-color: rgba(25, 85, 25, 0.5);
}

.content p {
  color: white;
  font-size: 2rem;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

.border {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.5) 10px,
    transparent 10px,
    transparent 18px
  );
  clip-path: polygon(
    0 4.2%,
    0 100%,
    0.5% 100%,
    0.5% 4.4%,
    7.3% 0.4%,
    99.5% 0.4%,
    99.5% 99.7%,
    0.5% 99.7%,
    0.5% 100%,
    100% 100%,
    100% 0,
    6.9% 0
  );
}