Search code examples
htmlcsscss-transforms

Transform: Rotate background-color

I'm having problems with transform: rotate on one of my headers. I'm trying to make the entire top half of the page have slight slant, this includes the text and the background. When I rotate the div it creates white space instead of filling the rest of the content in with the background color. The effect I'm trying to achieve is having the area outlined in blue to be the same red color so it expands from the left side of the page to the right. Here is the screenshot:

enter image description here

This is my code:

<div class="container-fluid header">
  <div class="row bottom-align">
    <div class="col-lg-8">
      <h1>Title</h1>
      <h1>Second-Title</h1>
      <h1>Another Title</h1>
    </div>
    <div class="col-lg-4 text-right bottom-align-text">
      <ul class="list-inline">
        <li><i class="fa fa-facebook fa-outline"></i></li>
        <li><i class="fa fa-twitter fa-outline"></i></li>
        <li><i class="fa fa-instagram fa-outline"></i></li>
        <li><i class="fa fa-pinterest fa-outline"></i></li>
        <li><i class="fa fa-envelope fa-outline"></i></li>
      </ul>
    </div>
  </div>
</div>

.header {

  background-color: $red-primary;
  color: $white;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Safari */
  transform: rotate(-5deg);

}

Any suggestions would be appreciated.

Solution

  • Kind of what Kevin was suggesting in the comments:

    body{
    overflow: hidden;
}
.header {
  background-color: #900;
  color: #fff;
  padding: 0 100px;
  margin: 0 -100px;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Safari */
  transform: rotate(-5deg);
}
    <div class="container-fluid header">
  <div class="row bottom-align">
    <div class="col-lg-8">
      <h1>Title</h1>
      <h1>Second-Title</h1>
      <h1>Another Title</h1>
    </div>
    <div class="col-lg-4 text-right bottom-align-text">
      <ul class="list-inline">
        <li><i class="fa fa-facebook fa-outline"></i></li>
        <li><i class="fa fa-twitter fa-outline"></i></li>
        <li><i class="fa fa-instagram fa-outline"></i></li>
        <li><i class="fa fa-pinterest fa-outline"></i></li>
        <li><i class="fa fa-envelope fa-outline"></i></li>
      </ul>
    </div>
  </div>
</div>