Как сделать такую кнопку необычной формы?

@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap';

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  font-family: 'Roboto', sans-serif;
  color: #333;
  overflow: hidden auto;
  margin: 0;
}

.unusual-shape {
  --background: #fff;
  --border-color: #ccc;
  --border-width: 1px;
  --skew-width: 15px;
  --skew-height: 8px;
  --skew-gap: 20px;
  --line-width: 18px;
  --line-height: 2px;
  --line-color: #5fb316;
  display: block;
  width: auto;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .05em;
  color: #75bd2f;
  padding: .75em 1em;
  position: relative;
  cursor: pointer;
  transition: color .5s ease;
}

.unusual-shape::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: var(--border-width) solid var(--border-color);
  border-radius: inherit;
  background-color: var(--background);
  box-sizing: border-box;
  mask-mode: luminance;
  -webkit-mask-image:
    linear-gradient(to left top, #000 50%, #fff 50%),
    linear-gradient(to right top, #000 50%, #fff 50%),
    linear-gradient(#000 0 0),
    linear-gradient(#fff 0 0),
    linear-gradient(#fff 0 0),
    linear-gradient(#fff 0 0);
  mask-image:
    linear-gradient(to left top, #000 50%, #fff 50%),
    linear-gradient(to right top, #000 50%, #fff 50%),
    linear-gradient(#000 0 0),
    linear-gradient(#fff 0 0),
    linear-gradient(#fff 0 0),
    linear-gradient(#fff 0 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position:
    calc((50% - var(--skew-gap) / 2) - var(--skew-width) / 2) 100%,
    calc((50% + var(--skew-gap) / 2) + var(--skew-width) / 2) 100%,
    50% 100%,
    0 0,
    0 100%,
    100% 100%;
  mask-position:
    calc((50% - var(--skew-gap) / 2) - var(--skew-width) / 2) 100%,
    calc((50% + var(--skew-gap) / 2) + var(--skew-width) / 2) 100%,
    50% 100%,
    0 0,
    0 100%,
    100% 100%;
  -webkit-mask-size:
    var(--skew-width) var(--skew-height),
    var(--skew-width) var(--skew-height),
    var(--skew-gap) var(--skew-height),
    100% calc(100% - var(--skew-height) + .5px),
    calc((50% - var(--skew-gap) / 2) - var(--skew-width) + .5px) calc(var(--skew-height) + .5px), 
    calc((50% - var(--skew-gap) / 2) - var(--skew-width) + .5px) calc(var(--skew-height) + .5px);
  mask-size:
    var(--skew-width) var(--skew-height),
    var(--skew-width) var(--skew-height),
    var(--skew-gap) var(--skew-height),
    100% calc(100% - var(--skew-height) + .5px),
    calc((50% - var(--skew-gap) / 2) - var(--skew-width) + .5px) calc(var(--skew-height) + .5px),
    calc((50% - var(--skew-gap) / 2) - var(--skew-width) + .5px) calc(var(--skew-height) + .5px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transition: background-color .5s ease;
}

.unusual-shape::after {
  content: '';
  display: block;
  width: calc(var(--skew-width) * 2 + var(--skew-gap));
  height: calc(var(--skew-height) + var(--line-height) / 2);
  background-image:
    linear-gradient(to left top,
      transparent calc(50% - var(--border-width)),
      var(--border-color) calc(50% - var(--border-width)),
      var(--border-color) 50%,
      transparent 50%
    ),
    linear-gradient(to right top,
      transparent calc(50% - var(--border-width)),
      var(--border-color) calc(50% - var(--border-width)),
      var(--border-color) 50%,
      transparent 50%
    ),
    linear-gradient(var(--border-color) 0 0),
    linear-gradient(var(--line-color) 0 0);
  background-repeat: no-repeat;
  background-position:
    calc((50% - var(--skew-gap) / 2) - var(--skew-width) / 2) 0,
    calc((50% + var(--skew-gap) / 2) + var(--skew-width) / 2) 0,
    50% 0,
    50% 100%;
  background-size:
    var(--skew-width) var(--skew-height),
    var(--skew-width) var(--skew-height),
    var(--skew-gap) var(--border-width),
    var(--line-width) var(--line-height);
  position: absolute;
  left: 50%;
  bottom: calc(var(--line-height) / -2);
  transform: translateX(-50%);
  pointer-events: none;
}

.unusual-shape:hover {
  --background: #75bd2f;
  --border-color: #45701b;
  color: #fff;
}

<button class="unusual-shape">Заказать звонок</button>

#x {
  border: 3px solid black;
  border-radius: .7em;
  display: inline list-item;
  list-style: ' ' inside;
  position: fixed;
  top: 3em;
  background: white;
  padding: 1.5em;
  transform-style: preserve-3D;
  perspective: 100px;
  mix-blend-mode: luminosity;
}

#x:after {
  content: '____';
  display: inline-block;
  border: 3px solid red;
  border-bottom: none;
  background: #aaa;
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  transform-origin: 0 100%;
  transform: translateZ(10px) rotateX(35deg);
  z-index: 999;
}

body {
  background: linear-gradient(45deg, violet, orange, lime, blue, pink, gold, brown, black, aqua);
  height: 1000vh; /* привет эпилептикам */
}

<button id='x'>заказать звонок</button>

.btn-border-svg {
  --_color: var(--primary-color);
  --_background-color: transparent;
  --_color-active: var(--primary-color);
  --_background-color-active: transparent;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.btn-border-svg-clipath {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.btn-border-svg-clipath::after,
.btn-border-svg-clipath::before {
  content: '';
  display: block;
  border-radius: inherit;
  clip-path: polygon( 4.222% 1.1%, 96.042% 1.1%, 96.042% 1.1%, 96.684% 1.316%, 97.293% 1.942%, 97.861% 2.942%, 98.38% 4.285%, 98.841% 5.934%, 99.236% 7.857%, 99.558% 10.02%, 99.798% 12.388%, 99.948% 14.927%, 100% 17.604%, 100% 83.496%, 100% 83.496%, 99.948% 86.186%, 99.796% 88.736%, 99.554% 91.113%, 99.23% 93.281%, 98.831% 95.207%, 98.366% 96.857%, 97.844% 98.195%, 97.272% 99.188%, 96.66% 99.801%, 96.014% 100%, 63.549% 99.047%, 63.549% 99.047%, 63.409% 99.032%, 63.27% 98.997%, 63.132% 98.942%, 62.994% 98.867%, 62.857% 98.772%, 62.721% 98.656%, 62.585% 98.521%, 62.451% 98.366%, 62.318% 98.191%, 62.187% 97.996%, 57.274% 90.313%, 57.274% 90.313%, 57.122% 90.088%, 56.968% 89.887%, 56.813% 89.708%, 56.657% 89.554%, 56.499% 89.422%, 56.341% 89.314%, 56.181% 89.23%, 56.021% 89.17%, 55.86% 89.134%, 55.699% 89.122%, 50.132% 89.122%, 44.301% 89.122%, 44.301% 89.122%, 44.14% 89.134%, 43.979% 89.17%, 43.819% 89.23%, 43.659% 89.314%, 43.501% 89.422%, 43.343% 89.554%, 43.187% 89.708%, 43.032% 89.887%, 42.878% 90.088%, 42.726% 90.313%, 37.813% 97.996%, 37.813% 97.996%, 37.681% 98.191%, 37.549% 98.366%, 37.415% 98.521%, 37.279% 98.656%, 37.143% 98.772%, 37.006% 98.867%, 36.868% 98.942%, 36.73% 98.998%, 36.591% 99.032%, 36.451% 99.047%, 4.25% 99.999%, 4.25% 99.999%, 3.604% 99.8%, 2.992% 99.187%, 2.42% 98.194%, 1.898% 96.856%, 1.433% 95.207%, 1.034% 93.281%, 0.71% 91.112%, 0.467% 88.736%, 0.316% 86.185%, 0.264% 83.495%, 0.264% 17.604%, 0.264% 17.604%, 0.316% 14.927%, 0.466% 12.388%, 0.706% 10.02%, 1.027% 7.857%, 1.423% 5.934%, 1.884% 4.285%, 2.403% 2.942%, 2.971% 1.942%, 3.58% 1.316%, 4.222% 1.1%);
  pointer-events: auto;
  position: absolute;
  inset: 0;
}

.btn-border-svg-clipath::after {
  background-color: var(--background);
  inset: 1px;
  z-index: -1;
}

.btn-border-svg-clipath::before {
  background-color: #d1d1d2;
  z-index: -2;
}

.btn-border-svg:is(:active, :focus-visible, .is-active) .btn-border-svg-clipath::before {
  background-color: var(--primary-color);
}

<button type="button" class="btn btn-border-svg header__callback" data-graph-path="modal-callback">
  <span class="btn-border-svg-clipath"></span>
  Заказать звонок
</button>