如何创建具有全屏大小CSS形状

我想创建连接低于全宽屏幕使用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>

来源

2017-06-20 Sanjeev Kumar

ÿ如果可以全屏显示，可以用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>

来源

2017-06-20 07:59:00 RacoonOnMoon

很大，我没不确定我是否可以在边框宽度中使用'vw'。感谢你及时的答复！ –

当然。没问题：） – RacoonOnMoon

对于全页面，你可以使用``VH and vw`属性的边界。

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

来源

2017-06-20 07:59:34 trichetriche

如果你把视窗单位和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>

来源

2017-06-20 08:00:46 LGSon

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

来源

2017-06-20 08:19:38 Sergey

如何创建具有全屏大小CSS形状

回答

相关问题