html - 如何以全屏尺寸创建CSS形状

我正在尝试在全屏屏幕中使用css创建如下所示的形状，但无法实现，这是示例图像



这是我到目前为止尝试过的（但希望使其具有响应性）

 body
{
background:#090d15;
}
.arrow-shape{
width: 0;
height: 0;
border-style: solid;
border-width: 55px 190px 0 190px;
border-color: #082947 transparent transparent transparent;
}

<div class="arrow-shape"></div>

最佳答案

如果可以全屏显示，则可以使用vw和vh尝试。

.arrow-shape{
width: 0;
height: 0;
border-style: solid;
border-width: 20vh 50vw 0 50vw;
border-color: #082947 transparent transparent transparent;
}

<div class="arrow-shape"></div>