CODEWITHSUNDEEP
htmlcsscss-transformsskew
Pedro Costa
Pedro Costa

Reputation: 2996

Skewed background div positioned to the content block's right hand bottom corner

See the following example

.nav-bar {
  position: relative;
  background-color: red;
}
.nav-bar:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
  width: 100%;
  height: 10.938rem;
  background: #1a5733;
  z-index: -1;
  -webkit-transform: skewY(-1.6deg);
  -moz-transform: skewY(-1.6deg);
  -ms-transform: skewY(-1.6deg);
  -o-transform: skewY(-1.6deg);
  transform: skewY(-1.6deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
  display: block;
}
.nav-menu {
  position: relative;
}
<div class="nav-bar">
  <nav class="nav-menu">
    <a href="#" class="nav-link">Home</a>
    <a href="#" class="nav-link">Sobre</a>
    <a href="#" class="nav-link">Destaques</a>
    <br>
    <a href="#" class="nav-link">Contactos</a>
    <br>
  </nav>
</div>

I'm trying to get the green skewed nav-bar:before to position bottom at right hand side of the nav-container so it's overflow matches the content in the container: please note that for the purpose of the screenshot, I modified bottom to -25px (please note that for the purpose of the screenshot, I modified bottom to -25px the original value 0 produces random results on screen resize)

Is it possible to calculate the bottom difference based on the 1.6deg skew applied to the nav-bar:before element? Please consider responsiveness.

Or is it just a case of adjusting manually with media query breakpoints?

Upvotes: 1

Views: 301

Answers (1)

Harry
Harry

Reputation: 89780

You can add transform-origin: right bottom to the element to get this done. Setting the transform origin as right bottom means that the transform is applied by keeping that point as fixed.

.nav-bar {
  position: relative;
  background-color: red;
}
.nav-bar:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
  width: 100%;
  height: 10.938rem;
  background: #1a5733;
  z-index: -1;
  -webkit-transform: skewY(-1.6deg);
  -moz-transform: skewY(-1.6deg);
  -ms-transform: skewY(-1.6deg);
  -o-transform: skewY(-1.6deg);
  transform: skewY(-1.6deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: right bottom;
  display: block;
}
.nav-menu {
  position: relative;
}
<div class="nav-bar">
  <nav class="nav-menu">
    <a href="#" class="nav-link">Home</a>
    <a href="#" class="nav-link">Sobre</a>
    <a href="#" class="nav-link">Destaques</a>
    <br>
    <a href="#" class="nav-link">Contactos</a>
    <br>
  </nav>
</div>

Upvotes: 1

Related Questions