0
265
VistasBotones de forma personalizada para el menú
Estoy tratando de lograr este efecto que obtuve en la imagen. Tengo problemas para crear formas personalizadas. ¿Podría alguien ayudarme con esto por favor?
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>
·
Santiago Trujillo
3 Respuestas
Responde la pregunta0
Para lograr la forma que desea en el primer botón. ¡Usa dos botones! ¡Asigne los mismos guiones!
https://www.codegrepper.com/code-examples/css/css+triangle+button
¡Aquí hay algunos detalles sobre cómo hacer la parte del triángulo!
¡Buena suerte!
·
Santiago Trujillo
Denunciar
0
ingrese la descripción de la imagen aquí
hola, probé un poco e hice este. Creo que esta estructura te puede ser útil.
Código:
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; }
·
Santiago Trujillo
Denunciar
0
Si solo estaba interesado en el componente visual, resultó bastante 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>
·
Santiago Trujillo
Denunciar
Responde la pregunta