nigelotoole/angled-edges

Add a consistent angled edge to a full width element with this SASS mixin.

Angled Edges (SASS mixin)

Live demo

Add a consistent angled edge to a full width element. This technique uses CSS clip-path to clip the image but has a fallback using pseudo elements for older browsers. It is only intended for use on full width elements as it uses the vw unit to calulate the angle.

Usage

Once you have downloaded the code, run the commands below to view the demo.

$ npm install
$ gulp serve

You can also import angled-edges.scss into your own project directly and use the classes already setup or use the mixin in your own classes.

Follow the code example below for basic usage with an angle on the top left.

  <div class="angle--top-left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Sig07-007.jpg/1280px-Sig07-007.jpg" alt="Nebula" class="angle__content">
  </div>

License

MIT © Nigel O Toole

angled-edges's Issues

Behaviour on iOS and Safari

Hey @NigelOToole,

I'm using your mixins for a React build with solid colour slanted edges. On iOS and Safari, I get some strange behaviour:

Typical Behaviour

Safari / iOS Behaviour (gap)

My primary suspect is potential differences in how iOS / Safari interprets vw units as opposed to Chrome.

This is my application of your mixins (many of my components can optionally have a solid slant appended onto the end of them):

import React from 'react';

export const Slant = props => {
  const { colour, direction, nextBlockColour } = props;
  return (
    <div className={`slant-block background-${nextBlockColour}`}>
      <div className={`inner-slant slant-${direction} colour-${colour}`} />
    </div>
  );
};

.slant-block {
  display: block;
  height: 320px;
  width: 100%;

  @include media($tablet-down) {
    height: 240px;
  }

  @include media($mobile-down) {
    height: 180px;
  }

  &.background-gradient-light-start {
    background-color: $gradient-light-start;
  }
  &.background-gradient-light-end {
    background-color: $gradient-light-end;
  }
  &.background-gradient-dark-start {
    background-color: $gradient-dark-start;
  }
  &.background-gradient-dark-end {
    background-color: $gradient-dark-end;
  }
  &.background-white {
    background-color: $white;
  }

  .inner-slant {
    width: 100%;
    height: 100%;

    &.slant-left-to-right {
      @include angle-edge($angle: 3, $angle-position-y: 'bottom', $angle-position-x: 'left');

      @include media($ridiculously-large-desktop-breakpoint-down) {
        @include angle-edge($angle: 5, $angle-position-y: 'bottom', $angle-position-x: 'left');
      }
      @include media($large-desktop-down) {
        @include angle-edge($angle: 7, $angle-position-y: 'bottom', $angle-position-x: 'left');
      }
      @include media($tablet-down) {
        @include angle-edge($angle: 9, $angle-position-y: 'bottom', $angle-position-x: 'left');
      }
    }

    &.slant-right-to-left {
      @include angle-edge($angle: 3, $angle-position-y: 'bottom', $angle-position-x: 'right');

      @include media($ridiculously-large-desktop-breakpoint-down) {
        @include angle-edge($angle: 5, $angle-position-y: 'bottom', $angle-position-x: 'right');
      }
      @include media($large-desktop-down) {
        @include angle-edge($angle: 7, $angle-position-y: 'bottom', $angle-position-x: 'right');
      }
      @include media($tablet-down) {
        @include angle-edge($angle: 9, $angle-position-y: 'bottom', $angle-position-x: 'right');
      }
    }

    &.colour-gradient-light-start {
      background-color: $gradient-light-start;
    }
    &.colour-gradient-light-end {
      background-color: $gradient-light-end;
    }
    &.colour-gradient-dark-start {
      background-color: $gradient-dark-start;
    }
    &.colour-gradient-dark-end {
      background-color: $gradient-dark-end;
    }
    &.colour-white {
      background-color: $white;
    }
  }
}

@mixin angle-edge($angle, $angle-position-y, $angle-position-x, $angle-position-bottom-x: '', $fallback: true, $fallback-color: #fff) {

  position: relative;
  overflow: hidden;

  // Converts degrees to VW, 100vw = 45deg using this technique
  @if $angle < 46 {
    $angle: convertDegToVW($angle);
  }
  @if $angle > 45 {
    $angle: 0;
    @error 'Invalid angle, it must be between 1-45';
  }

  @if $angle-position-bottom-x == '' {
    $angle-position-bottom-x: $angle-position-x;
  }

  $angle-calc-top: calc(0% + #{$angle}vw);
  $angle-calc-bottom: calc(100% - #{$angle}vw);

  $clip-path-top: 0 0, 100% 0;
  $clip-path-bottom: 100% 100%, 0 100%;

  $border-width-top: '';
  $border-width-bottom: '';
  $border-color-top: '';
  $border-color-bottom: '';


  @if $angle-position-y == 'top' or $angle-position-y == 'both' {

    @if $angle-position-x == 'left' {
      $clip-path-top: 0 $angle-calc-top, 100% 0;

      $border-width-top: #{$angle + 1}vw 100vw 0 0;
    }

    @if $angle-position-x == 'right' {
      $clip-path-top: 0 0, 100% $angle-calc-top;

      $border-width-top: #{$angle + 1}vw 0 0 100vw;
    }

    $border-color-top: $fallback-color transparent transparent transparent;
  }


  @if $angle-position-y == 'bottom' or $angle-position-y == 'both' {

    @if $angle-position-y == 'both' and $angle-position-x != $angle-position-bottom-x {
      $angle-position-x: $angle-position-bottom-x;
    }

    @if $angle-position-x == 'left' {
      $clip-path-bottom: 100% 100%, 0 $angle-calc-bottom;

      $border-width-bottom: 0 100vw #{$angle + 1}vw 0;
    }

    @if $angle-position-x == 'right' {
      $clip-path-bottom: 100% $angle-calc-bottom, 0 100%;

      $border-width-bottom: 0 0 #{$angle + 1}vw 100vw;
    }

    $border-color-bottom: transparent transparent $fallback-color transparent;
  }

  $clip-path: polygon($clip-path-top, $clip-path-bottom);

  -webkit-clip-path: polygon($clip-path-top, $clip-path-bottom);
  clip-path: polygon($clip-path-top, $clip-path-bottom);

  // Fallback for clip-path with solid colours
  @if $fallback {

    @supports not (clip-path: $clip-path) {

      &::before, &::after {
        content: "";
        position: absolute;
        left: 0;
        z-index: 10;
        display: block;
        border-style: solid;
      }

      @if $angle-position-y == 'top' or $angle-position-y == 'both' {
        &::before {
          top: 0;
          border-width: $border-width-top;
          border-color: $border-color-top;
        }
      }

      @if $angle-position-y == 'bottom' or $angle-position-y == 'both' {
        &::after {
          bottom: 0;
          border-width: $border-width-bottom;
          border-color: $border-color-bottom;
        }
      }

    }

  }
}

Angles not being properly calculated

I've been trying to implement this in a personal project that I am working on that I would like to have consistent angled areas throughout to match personal branding.

As an example:

The angle in the overlaid image (lower faded blue triangle) is at 12°, and in my Sass code, I am using the include like this:

  padding: 5% 0 11.5%;
  @include angle-edge($angle: 12, $angle-position-y: 'bottom', $angle-position-x: 'right', $angle-position-bottom-x: 'left');
  width: 100%;

I found that in order to get it as close to my design as possible, I would have to bring it down to around 9.5°, but it's not quite there:

I am not totally sure, but would convertDegToVW() need to be changed to make the angles more accurate? Or is this a case of something wrong with my styles mucking up the clipping path?

Thanks!

Background bug in Safari and Edge

Hi! First of all, thanks for creating this. It's easy to use and looks great for my project in Chrome and Firefox. In Safari and Edge, though, I'm getting a white background-color for the angled divs. This isn't coming from my styles. I've published screenshot of the bug.

Any experience with this?