Comment créer une forme CSS avec plein écran

Question

Je suis en train de créer une forme comme ci-joint en utilisant css en plein écran de largeur, mais pas en mesure d'atteindre, voici l'exemple d'image

Cette est ce que je l'ai essayé jusqu'à présent (mais je voulais le rendre réactif)

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

Y Vous pouvez essayer avec vw et vh si cela peut être en plein écran.

.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

Pour une pleine page, vous pouvez utiliser les `` vh and propriétés vw` pour votre frontière. 100vw correspond à 100% de la largeur de la fenêtre.

Je vais vous laisser deviner pour vh!

Answer 3

Si vous combinez des unités de fenêtres et px, elle échelle de largeur et ont sa hauteur maintenue à 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>