Ivo Ivo - 1 year ago 159
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 Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download