如何创建全屏尺寸的 CSS 形状

Question

我正在尝试在全宽屏幕中使用 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>

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

对于整页，您可以为边框使用 ``vhandvw` 属性。

100vw 表示视口宽度的 100%。我会让你猜 vh ！

Answer 3

如果您将视口单位与 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 4

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

<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>

如何创建全屏尺寸的 CSS 形状

How to create CSS shape with full screen size

html

css

css-shapes