cssで背景に逆三角形を配置したいのにはみ出ます。

Question

cssで余白をとり真ん中に黄色い背景+逆向き三角形を作りたいのですが、
下記の画像のように逆三角形が.yellowの幅を読み込まずにはみ出てしまいます。
黄色の破線のように幅を合わせたく困っております。

該当のソースコード

<div class="yellow">
　<div class="nayami_box">
     <ul>
       　<li class="li">テキスト</li>
            </ul>
        </div>
    </div>

試したこと

レスポンシブルにしたいのでwidthは％で指定したいのですがそれがいけないのかと思いpxで指定してみたりしましたが出来ませんでした・・・

.yellow {
    background: #fffbe3;
    clear: both;
    position: relative;
    margin: 0 0 60px;
    margin: 0 auto;
    width: 70%;
}
.yellow:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 60px 50vw 0 50vw;
    border-color: #fffbe3 transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

補足情報（FW/ツールのバージョンなど）

css初心者でネットを調べて見様見真似でやっているのでなにか根本が見違っているのでしょうか。
宜しくお願い致します。

Answer 1

数字変えてみる…とか？

border-width: 60px 34.5vw 0px 34.5vw;

上の箱が幅70％、三角が高さ60px、左右の幅50vw+50vw

35vw+35vwにすると、スクロールバー分はみ出るから69vw止めにしてます。
width:100%;とwidth:100vw;の違いを調べてみると良いかもです。

Comments

[kuma0817]

3～4日試行錯誤していたのにおかげさまで1発で解決しました。overflowをやったりとトンチンカンなことばかりしてました。。。border-widthだったんですね！ありがとうごさいました！％とvwしっかり勉強していきます。