javascript - 如何创建具有不同形状的垂直响应式左侧菜单

Question

我需要这种使用 HTML、CSS/Bootstrap/Jquery/Javascript 的垂直菜单设计，我可以将其用于任何具有响应高度的平板设备，如图中所示。

垂直响应式菜单在横向和纵向模式下应始终为 100% 高度。

本文附有垂直响应式菜单设计，供您引用。

我尝试了下面的代码，但我无法居中对齐框中的文本、框的边框半径和菜单的垂直响应(100% 高度)。

Code help got from this post

.myForm {
  max-width: 100%;
  width: 200px;
  height: 100px;
  position: relative;
  background-color: #A0A0A0;
  color: #fff;
  font-size: 2.4em;
  font-weight: 700;

}
.myForm  font { 
  margin:0 auto; 
  padding:0; 
  font-size:13px; 
  color:#ffffff; 
  text-align:center;
}

.myForm span {
  display: inline-block;
  vertical-align: middle;
}

.myForm::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
}

.myForm::after {
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 300px 0;
  border-color: transparent #fff transparent transparent;
  border-radius:0px 0px 0px 30px;
}

<div class="myForm" style="background:#ff0000;"><font>Menu 1</font></div>
<div class="myForm" style="background:#0094ff;"><font>Menu 2</font></div>
<div class="myForm" style="background:#ff0000;"><font>Menu 3</font></div>
<div class="myForm" style="background:#0094ff;"><font>Menu 4</font></div>

Answer 1

尝试使用 vh 进行垂直对齐，具体取决于 viewport 高度。在字体标签是纯 html 之后，为了将其与特定的 css 一起使用，您可以添加 display:block。我使用翻译将您的文本居中对齐。

.myForm {
  max-width: 100%;
  width: 200px;
  height: 25vh;
  position: relative;
  background-color: #A0A0A0;
  color: #fff;
  font-size: 2.4em;
  font-weight: 700;
  min-width:200px;          
}

.myForm  font { 
  margin:0 auto; 
  padding:0; 
  font-size:13px; 
  color:#ffffff; 
  top:50%;
  left:30%;
  display:block;
  position:absolute;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}

.myForm span {
    display: inline-block;
    vertical-align: middle;
}

.myForm::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;

}

.myForm::after {
    content: '';
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 300px 0;
    border-color: transparent #fff transparent transparent;
    border-radius:0px 0px 0px 30px;
}

<div class="myForm" style="background:#ff0000;"><font>Menu 1</font></div>
<div class="myForm" style="background:#0094ff;"><font>Menu 2</font></div>
<div class="myForm" style="background:#ff0000;"><font>Menu 3</font></div>
<div class="myForm" style="background:#0094ff;"><font>Menu 4</font></div>