CODEWITHSUNDEEP
csscss-shapes
Ivo
Ivo

Reputation: 2636

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/

Upvotes: 4

Views: 3306

Answers (1)

Michael
Michael

Reputation: 363

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>

Upvotes: 13

Related Questions