<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box {
  width: 200px;
  aspect-ratio:1;
  display :inline-block;
  margin: 10px;
  background: linear-gradient(red,blue);
}

.box:nth-child(1) {
  clip-path: polygon(100.00% 50.00%,25.00% 93.30%,25.00% 6.70%,100.00% 50.00%,calc(25.00% - -10.00px) calc(6.70% - -17.32px),calc(25.00% - -10.00px) calc(93.30% - 17.32px),calc(100.00% - 20.00px) calc(50.00% - 0.00px),calc(25.00% - -10.00px) calc(6.70% - -17.32px));
}
.box:nth-child(2) {
  clip-path: polygon(100.00% 50.00%,50.00% 100.00%,0.00% 50.00%,50.00% 0.00%,100.00% 50.00%,50.00% 10.00%,10.00% 50.00%,50.00% 90.00%,90.00% 50.00%,50.00% 10.00%);
}
.box:nth-child(3) {
  width: 200px;
  aspect-ratio: 1;
  clip-path: polygon(93.30% 75.00%,50.00% 100.00%,6.70% 75.00%,6.70% 25.00%,50.00% 0.00%,93.30% 25.00%,93.30% 75.00%,88.97% 27.50%,50.00% 5.00%,11.03% 27.50%,11.03% 72.50%,50.00% 95.00%,88.97% 72.50%,88.97% 27.50%);
}
.box:nth-child(4) {
  clip-path: polygon(100.00% 50.00%,90.45% 79.39%,65.45% 97.55%,34.55% 97.55%,9.55% 79.39%,0.00% 50.00%,9.55% 20.61%,34.55% 2.45%,65.45% 2.45%,90.45% 20.61%,100.00% 50.00%,calc(90.45% - 4.85px) calc(20.61% - -3.53px),calc(65.45% - 1.85px) calc(2.45% - -5.71px),calc(34.55% - -1.85px) calc(2.45% - -5.71px),calc(9.55% - -4.85px) calc(20.61% - -3.53px),calc(0.00% - -6.00px) calc(50.00% - 0.00px),calc(9.55% - -4.85px) calc(79.39% - 3.53px),calc(34.55% - -1.85px) calc(97.55% - 5.71px),calc(65.45% - 1.85px) calc(97.55% - 5.71px),calc(90.45% - 4.85px) calc(79.39% - 3.53px),calc(100.00% - 6.00px) calc(50.00% - 0.00px),calc(90.45% - 4.85px) calc(20.61% - -3.53px));
}