<div class="shape starburst"></div>
<div class="shape starburst invert"></div>

<div class="shape chevron"></div>
<div class="shape chevron invert"></div>

<div class="shape triangle"></div>
<div class="shape triangle invert"></div>

<div class="shape pentagon"></div>
<div class="shape pentagon invert"></div>

.shape {
  --shape: 0 0,100% 0,50% 100%,0 0; /* the first value is repeated at the end */
  
  height: 150px;
  aspect-ratio: 1;
  clip-path: polygon(var(--shape));
  background: linear-gradient(-45deg,#CD8C52,#5E9FA3);
}
.shape.invert {
  --s: -20px; /* to control the space */
  padding: calc(-1*var(--s));
  box-sizing: content-box; 
  clip-path: 
    polygon(evenodd,var(--s) var(--s),calc(100% - var(--s)) var(--s),calc(100% - var(--s)) calc(100% - var(--s)),var(--s) calc(100% - var(--s)),var(--s) var(--s),var(--shape)) content-box; 
}

/* defining the shapes */
.starburst {
  --shape: 100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%,100% 50%;
}
.chevron {
  --c: 40%;
  --shape: 0 0,var(--c) 0,100% 50%,var(--c) 100%,0 100%,calc(100% - var(--c)) 50%,0 0;
  aspect-ratio: 3/5;
}
.triangle {
  --shape: 100% 0,0 50%,100% 100%,100% 0;
  aspect-ratio: 1/2;
}
.pentagon {
  --shape: 79.39% 90.45%,20.61% 90.45%,2.45% 34.55%,50% 0%,97.55% 34.55%,79.39% 90.45%;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  place-items: center;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  gap: 10px;
}