如何创建全屏大小的CSS形状

Question

我正在尝试使用全宽屏幕中的css创建一个像下面附加的形状，但无法实现，这是示例图像

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果它可以全屏，你可以用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>

Answer 2

如果将视口单元和px组合在一起，它将缩放到全宽并将其高度保持在55px

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

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

Answer 3

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
}

＆＃13;

<div class="container">
  <svg width="100%"
  viewBox="0 0 60 50" height="50px" preserveAspectRatio="none">
    <polyline points="0,0 0,10 30,50 60,10 60,0"
    stroke-width="0" fill="orange"/>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

对于整页，您可以使用边框的``vh and vw`属性。

100vw表示100％的视口宽度。我会猜你猜！