応答CSSの三角形

Question

こんにちはこの画像のような応答性のCSSの三角形を作成する方法、私は境界線の幅が、何もパーセントを使用しようとしましたので、私は簡単な解決策を検索：

ここに私の簡単なコード：

/*Less Variables and Mixin*/ 
 
/*General Default Values*/ 
 
.table{ 
 
    padding:50px 0; 
 
} 
 
.table ul, 
 
.table li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.table .table-nested { 
 
    height:200px; 
 
    padding: 0 0 20px; 
 
    margin-bottom: 50px; 
 
    background-color: #ffffff; 
 
    border: 1px solid #FFE44A; 
 
} 
 
.table .table-nested .planType { 
 
    margin: 0 0 20px; 
 
    padding: 10px 5px; 
 
    position: relative; 
 
    background-color: #FFE44A; 
 
    color: #333333; 
 
    font-size: 35px; 
 
    font-weight: 400; 
 
    letter-spacing: 4px; 
 
} 
 
.table .table-nested .planType:before { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 24px 150px 0 150px; 
 
    border-color: #FFE44A transparent transparent transparent; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="table"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-3 col-sm-6"> 
 
        <div class="table-nested"> 
 
         <h2 class="planType">Business</h2> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>

注実行フルスクリーンでのコードスニペット。

Answer 1

％またはpxの代わりにvwを使用できます。これはスクリーン幅に基づいて反応しますが、ブートストラップメディアクエリで親コンテナが異なるサイズにジャンプしたときには実際には機能しません。

Answer 2

CSSのパーセンテージ値を境界線の幅に使用することはできません。 これはjavascriptを使って実現できます。

ここでは例として、ユーザーがウィンドウのサイズを&のDOMサイズに変更したときの#arrow幅を変更しています。

window.addEventListener('resize', function(){ 
 
resizeArrow(); 
 
}); 
 
document.addEventListener('DOMContentLoaded', function(){ 
 
resizeArrow(); 
 
}); 
 

 
function resizeArrow() { 
 
    var business = document.getElementById('business'); 
 
    var arrow = document.getElementById('arrow'); 
 
    var businessWidth = business.offsetWidth; // business width 
 
    var businessHeight = business.offsetHeight; // business height 
 
    arrow.style.cssText = 'border-width: '+businessHeight+ 'px '+(businessWidth/2)+'px 0 '+(businessWidth/2)+'px'; // set arrow border-width 
 
}

/*Less Variables and Mixin*/ 
 
/*General Default Values*/ 
 
.table{ 
 
    padding:50px 0; 
 
} 
 
.table ul, 
 
.table li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.table .table-nested { 
 
    height: 200px; 
 
    padding: 0 0 20px; 
 
    margin-bottom: 50px; 
 
    background-color: #ffffff; 
 
    border: 1px solid #FFE44A; 
 
} 
 
.table .table-nested .planType { 
 
    margin: 0 0 20px; 
 
    padding: 10px 5px; 
 
    position: relative; 
 
    background-color: #FFE44A; 
 
    color: #333333; 
 
    font-size: 35px; 
 
    font-weight: 400; 
 
    letter-spacing: 4px; 
 
} 
 
.table .table-nested .planType #arrow { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0; 
 
    border-color: #FFE44A transparent transparent transparent; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="table"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-3 col-sm-6"> 
 
        <div class="table-nested"> 
 
         <h2 id="business" class="planType">Business<span id="arrow"></span></h2> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>