Custom shaped buttons for menu

user_16496328 0
Viewed 93

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?

What I want to achieve

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>

css html
3 Answers

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>

user_101794150

enter image description here

hello,I tried a little and made this one.I think this structure can be useful for you.

Code:

enter code here
<div class="container">
    <div class="menu">
    <button class="first">Start
    </button>
    <button class="numbers" id="btn-top-shadow">1
    </button>
    <button class="numbers">2
    </button>
    <button class="numbers">3
    </button>
    <button class="numbers">4
    </button>
    <button class="numbers">5
    </button>
    <button class="numbers">6
    </button>
    <button class="numbers">7
    </button>
    </div>
    <div class="content">
    
    </div>
    </div>


body {
    margin: 0;
  }
  .container {
    display: flex;
    width: 100%;
    height: 100vh;
  }
  .first
  {
      transform: rotate(270deg) scale(4.5) ;
      position: relative;
      top:10%;
      font-size: 4px;
      
      
  }
  

  .menu {
    background: lightgray;
    flex: 0.1;
    display: flex;
    flex-direction: column;
    padding-left: 15px;
  }
  
  .numbers { 
    background: #79726c;
    border: none;
    transform: skewY(10deg);
    width: 38%;
    position: relative;
    left: 38px;
    top: 110px;
    color: white;
    text-shadow: 0px 7px 3px black;
    height: 5%;
    border-bottom: 0.4px solid black
  
  }
  #btn-top-shadow
  {
    box-shadow: 0px -7px 7px black;
  }
  .content {
    flex: 1;
    background: blue;
  }

user_159756150
user_90157420
Related