code

Slanted Sections

Makes slanted sections with your choice of colors

How to Use

  • 1. Creat an element above or below the area you want a slant
  • 2. Element must have the class ".slanty-shim"
  • 3. Add a class with the mix-in (slantColors or slantColorsLeft)
  • 4. If your adding a class for global use, place the scss in the _slant-section.scss file

                    <div class="slanty-shim pink-grey"><div>
                  

                    .pink-grey.slanty-shim {
                      @include slantColors($vol-pink, #fafafa);
                    }

Examples:

Top Section

Bottom Section


                    <div class="padding-s pink border-bottom border-pink border-darken-3">
                      <h4 class="text-white">Top Section</h4>
                    </div>
                    <div class="slanty-shim pink-grey"></div>
                    <div class="padding-s grey lighten-5 border-top border-grey border-lighten-2">
                      <h4>Bottom Section</h4>
                    </div>

Notes:

  • When using the mix-in, the first color is the top and the second is the bottom
  • Sass vars are acceptable to use in the mix-in, you can also use 'transparent'