レスポンシブに対応した幅いっぱいの三角形

矢印

親要素(.sankaku)のpadding-topと疑似要素(.sankaku::after)の高さ（例でいうとborder-widthの50pxの部分）が同じになるように設定してください。上向きにしたいときは border-width: 0 50vw 50px 50vw; border-color: transparent transparent #6fc3a4 transparent; に変更してください

<div class="sankaku"></div>

.sankaku {
padding-top: 50px;
position: relative;
overflow: hidden;
width: 100%;
}
.sankaku::after{
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 50%;
border-style: solid;
border-width: 50px 50vw 0 50vw;
border-color: #6fc3a4 transparent transparent transparent;
transform: translateX(-50%);
}