如何創建具有全屏大小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形狀

回答

相關問題