異なる形状の垂直応答左メニューを作成するには

Question

イメージのような応答性の高いタブレットデバイスに使用できるHTML、CSS/Bootstrap/Jquery/Javascriptを使用してこの垂直メニューデザインが必要です。

垂直応答メニューは、横および縦モードの両方で常に100％の高さにする必要があります。

あなたの参照のために、この投稿に添付された垂直応答メニューデザイン。

Iは、以下のコードを試みたが、私は、メニュー（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

仮想heigh（VH）を使用ビューポート高さに依存します。フォントタグが純粋なhtmlの後に、具体的なcssでこれを使用するには、display:blockを追加することができます。私はあなたのテキストを中心に整列させるためにtranslateを使用しています。

.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>

Answer 2

.myForm { 
     height: 25vh; 
    } 

垂直整列のためvhを使用してみてください代わりPX

Answer 3

は、VHを使ってパンディアラジャンに同意します。次に、フォントの絶対位置を指定し、左、上、および変換の規則を使用して配置します。

運が良かった！

.myForm font { 
    margin: 0 auto; 
    padding: 0; 
    font-size: 13px; 
    color: #ffffff; 
    text-align: center; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 
.myForm { 
    height: 25vh; 
} 

Answer 4

私は、このサイトで見つけCSSのトリック使用したソリューションがあると思う： https://jsfiddle.net/pcqamcrL/

.myForm { 
    max-width: 100%; 
    width: 200px; 
    height: 100px; 
    position: relative; 
    background-color: #A0A0A0; 
    color: #fff; 
    font-size: 2.4em; 
    font-weight: 700; 
} 
.myForm font { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    margin:0 auto; 
    padding:0; 
    font-size:13px; 
    color:#ffffff; 
    text-align:center; 
} 

.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>