Custom shaped buttons for menu

Question

I am trying to achieve this effect which I got on image. I am having trouble in creating custom shapes. Could someone assist me with this please?

body {
  margin: 0;
}
.container {
  display: flex;
  width: 100%;
  height: 100vh;
}

.menu {
  background: lightgray;
  flex: 0.1;
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}

.numbers { 
  background: #79726c;
  border: none;
  transform: skewY(10deg);

}
.content {
  flex: 1;
  background: blue;
}

<div class="container">

<div class="menu">
<button class="first">Start
</button>
<button class="numbers">1
</button>
<button class="numbers">2
</button>
</div>
<div class="content">

</div>
</div>

Answer 1

If you were only interested in the visual component, then it turned out quite similar:

body {
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
  background-color: #312a28;
  background-image: url("https://cdn.pixabay.com/photo/2016/11/27/05/02/texture-1862140_960_720.jpg");
}

.container {
  position: relative;
  display: flex;
  height: 626px; width: 70vw;
}

.tabs {
  position: relative;
  top: 124px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  height: 464px; width: 66px;
  user-select: none;
}

.tabs>input {
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}

.tab {
  position: relative;
  left: 6px;
  height: 34px; width: 66px;
  border: none;
  box-sizing: border-box;
  font-size: 40px; line-height: 34px;
  font-family: sans-serif; font-weight: bold;
  text-align: center;
  color: #f9f9f7;
  background-color: #79726c;
  filter: drop-shadow(-2px 8px 4px #0008);
  transition: 0.3s ease;
}
.tab:nth-of-type(1) { z-index: 6; }
.tab:nth-of-type(2) { z-index: 5; }
.tab:nth-of-type(3) { z-index: 4; }
.tab:nth-of-type(4) { z-index: 3; }
.tab:nth-of-type(5) { z-index: 2; }
.tab:nth-of-type(6) { z-index: 1; }
.tab:nth-of-type(7) { z-index: 0; }

.tab::before,
.tab::after {
  content: "";
  position: absolute;
  left: 0; z-index: -1;
  width: 100%;
  border-radius: 6px 4px 4px 6px;
  background-color: inherit;
  background-image: inherit;
}
.tab::before {
  bottom: 16px; height: 126px;
  transform: skewy(-28deg);
}
.tab::after {
  top: 16px; height: 40px;
  transform: skewy(28deg);
}

.tabs > input:not(:checked) + .tab:hover {
  background-color: #aba5a0;
  cursor: pointer;
}

.tabs > input:checked + .tab {
  left: 0; z-index: 7;
  background-color: #d8cec1;
  background-image: url("https://cdn.pixabay.com/photo/2016/11/08/03/16/seamless-1807376_960_720.jpg");
  color: #393534;
}

.tab .vertical {
  position: absolute;
  left: 10px; top: -85px;
  transform: rotate(-90deg);
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 0 2px currentcolor;
}

.content {
  position: relative;
  left: -3px; z-index: 8;
  flex: 1;
  border-radius: 6px;
  background-color: #d8cec1;
  background-image: url("https://cdn.pixabay.com/photo/2016/11/08/03/16/seamless-1807376_960_720.jpg");
  box-shadow: 2px 13px 6px -4px #0008;
}

<section class="container">
  <div class="tabs">
    <input type="radio" name="tabs" id="tab0" checked><label for="tab0" class="tab"><span class="vertical">Start</span></label>
    <input type="radio" name="tabs" id="tab1"><label for="tab1" class="tab">1</label>
    <input type="radio" name="tabs" id="tab2"><label for="tab2" class="tab">2</label>
    <input type="radio" name="tabs" id="tab3"><label for="tab3" class="tab">3</label>
    <input type="radio" name="tabs" id="tab4"><label for="tab4" class="tab">4</label>
    <input type="radio" name="tabs" id="tab5"><label for="tab5" class="tab">5</label>
    <input type="radio" name="tabs" id="tab6"><label for="tab6" class="tab">6</label>
  </div>
  <div class="content"></div>
</section>