<main>
  <header>
    <h1>clip-path: polygon(...)</h1>
  </header>
  <svg viewBox="0 0 400 300">
    <image href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
  </svg>
</main>

main {
  width: 600px;
}
header {
  background: darkSeaGreen;
  position: relative;
  z-index: 0;
  padding: 0.1rem;
}
header::before {
  background: indigo;
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 1.5rem;
  right: 1.5rem;
}
h1 {
  background: plum;
  color: indigo;
  text-align: center;
  padding: 10%;
  margin: 2rem 4rem;
  font-size: 300%;
  font-weight: normal;
}
header,
header::before,
h1,
image {
  clip-path: polygon(
    0 30px,
    30px 0,
    calc(100% - 30px) 0,
    100% 30px,
    100% calc(100% - 30px),
    calc(100% - 30px) 100%,
    30px 100%,
    0 calc(100% - 30px)
  );
}