Ivo Ivo - 3 months ago 40
CSS Question

full width responsive arrow on bottom of div

Hee!

Currently I'm trying to make the following nav

nav

but ending up getting the following

enter image description here

How can I lower the height of the arrow I'm adding at the bottom but keeping the full width?



nav {
position: relative;
display: inline-block;
height: 50px;
width: 100%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
nav:after {
content: "";
position: absolute;
top: 50px;
left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}

<nav>nav</nav>





http://jsfiddle.net/v50wwuw6/

Answer

Using the border triangle technique with vw unit: http://jsfiddle.net/hamop5ca/

30px is the arrow height.

nav {
    position: relative;
    height: 50px;
    width:100%;
    background: gray;
}
nav:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-top: 30px solid red;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
}


<nav>nav</nav>