CSSシェイプの境界線の幅を常に三角形に設定する

Question

私は下（緑）シェイプの境界線の幅を設定する方法を探しています。ボーダー - 右に50％。高さは変わらないはずです。どのようにこれを実装するためのアイデア？ここでペンも同様です：https://codepen.io/anon/pen/yPMNPZ

.par { 
 
    width: 320px; 
 
    height: 500px; 
 
    background-color: lightgrey; 
 
} 
 

 
#container { 
 
    background-color: #ccc; 
 
    position: relative; 
 
} 
 

 
#container::after { 
 
    border-top: 50px solid green; 
 
    border-left: 60px solid transparent; 
 
    border-right: 60px solid transparent; 
 
    bottom: -550px; 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
}

<div class="par"> 
 
    <div id="container"></div> 
 
</div>

Answer 1

#container::after { 
    border-top: 50px solid green; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    bottom: -550px; 
    content: ""; 
    position: absolute; 
    width: calc(100% - 120px); 
} 

この

幅にした後、擬似要素を更新してください：CALC（100％ - 120ピクセル）。ここで

は、コードペンリンク https://codepen.io/iamlalit/full/YEZXBx/

Answer 2

私はあなたの質問を理解している場合わからないです。しかし、あなたはこれを探していますか？以下のコードは、追加：

.par { 
 
    width: 320px; 
 
    height: 500px; 
 
    background-color: lightgrey; 
 
} 
 

 
#container { 
 
    background-color: #ccc; 
 
    position: relative; 
 
} 
 

 
#container::after { 
 
    border-top: 50px solid green; 
 
    border-left: 60px solid transparent; 
 
    border-right: 60px solid transparent; 
 
    bottom: -599px; 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 100px 160px 0 160px; 
 
}

<div class="par"> 
 
    <div id="container"></div> 
 
</div>

Answer 3

は、いくつかのメディアクエリでそれを行うことができました。幅が320ピクセルの場合は、#container :: after：にこれらのスタイルを適用し、必要に応じてサイズを変更してください。

border-left: 160px solid transparent; 
    border-right: 160px solid transparent; 
    width: 84%; 

Answer 4

希望します。

.par { 
 
    width: 320px; 
 
    height: 500px; 
 
    background-color: lightgrey; 
 
} 
 

 
#container { 
 
    background-color: #ccc; 
 
    position: relative; 
 
    height:100%; 
 
} 
 

 
#container:after { 
 
\t top: 100%; 
 
\t left: 50%; 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
\t border-color: rgba(136, 183, 213, 0); 
 
\t border-top-color: green; 
 
\t border-width: 160px; 
 
\t margin-left: -160px; 
 
}

<div class="par"> 
 
    <div id="container"></div> 
 
</div>