How to create

"non-rectangular" headers

Lucas Bonomi (@LukyVj)

Lucas Bonomi

@LukyVj

Frontend Developer / Designer

"non-rectangular"

Lucas Bonomi (@LukyVj)

Full CSS technic

Lucas Bonomi (@LukyVj)

    
    header {
      background: blue;
    }
    
    article {
      background: green;
    }


    article:before {
      position: absolute;
      background: red;
      transform: skewY(-3deg);
      z-index: 10; 
    }

Lucas Bonomi (@LukyVj)


    // Diagonals
    @mixin diagonal($rotation, $background, $height, $pos: after) {
      
      &:#{$pos} {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: $height;
        background: #{$background};
        transform: skewY($rotation); // Skew it
        z-index: 0;
        
        // If the screen is really large,
        // Reduce your rotation angle
        @media (min-width: 2000px) {
          transform: skewY($rotation / 2);
        }
    
        @content; // Insert more CSS if needed
      }
    }

Lucas Bonomi (@LukyVj)