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>

Answer 2

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; }

Answer 3

To achieve the shape you want on the first button. Use two buttons! Assign the same scripts!

https://www.codegrepper.com/code-examples/css/css+triangle+button

Here's some details on how to make the triangle part!

Good luck!