<div class="shape"></div>
<div class="shape invert"></div>
<div class="shape invert" style="--p: 50% 0,0 100%,100% 100%,
       50% 0"></div>

.shape {
  --p: 50% 0,100% 100%,0 100%,
       50% 0;
  
  width: 150px;
  aspect-ratio: 1;
  background: linear-gradient(gold,#ff8001);
  clip-path: polygon(var(--p));
}
.shape.invert {
  --d: -20px;
  padding: calc(-1*var(--d));
  clip-path: 
    polygon(evenodd,var(--d) var(--d),calc(100% - var(--d)) var(--d),calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),var(--d) var(--d),var(--p)) content-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-auto-flow: column;
  gap: 100px;
  place-content: center;
  place-items: center;
  background: repeating-linear-gradient(-45deg,#fff 0 20px,#fafafa 0 40px);
}