CODEWITHSUNDEEP
htmlcsscss-shapes
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

How to create CSS shape with full screen size

I am trying to create a shape like attached below using css in full width screen, but not able to achieve, Here is the example image

down arrow shape

This is what I have tried so far (but wanted to make it responsive)

 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>

Upvotes: 0

Views: 2142

Answers (4)

Sergey
Sergey

Reputation: 7692

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

Upvotes: 1

Asons
Asons

Reputation: 87191

If you combine viewport units and px, it will scale to full width and have its height kept at 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>

Upvotes: 1

user4676340
user4676340

Reputation:

For a full-page, you can use the ``vhandvw` properties for your border.

100vw means 100% of the viewport width. I'll let you guess for vh !

Upvotes: 0

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

You can try it with vw and vh if it can be fullscreen.

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

Upvotes: 2

Related Questions