.angle--top-left {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%); }
  @supports not (clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%)) {
    .angle--top-left::before, .angle--top-left::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid; }
    .angle--top-left::before {
      top: 0;
      border-width: 8vw 100vw 0 0;
      border-color: #fff transparent transparent transparent; } }

.angle--top-right {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%); }
  @supports not (clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%)) {
    .angle--top-right::before, .angle--top-right::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid; }
    .angle--top-right::before {
      top: 0;
      border-width: 8vw 0 0 100vw;
      border-color: #fff transparent transparent transparent; } }

.angle--bottom-left {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw)); }
  @supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw))) {
    .angle--bottom-left::before, .angle--bottom-left::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid; }
    .angle--bottom-left::after {
      bottom: 0;
      border-width: 0 100vw 8vw 0;
      border-color: transparent transparent #fff transparent; } }

.angle--bottom-right {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%); }
  @supports not (clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%)) {
    .angle--bottom-right::before, .angle--bottom-right::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid; }
    .angle--bottom-right::after {
      bottom: 0;
      border-width: 0 0 8vw 100vw;
      border-color: transparent transparent #fff transparent; } }

.angle--both-left-left {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 calc(100% - 7vw)); }
  @supports not (clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 calc(100% - 7vw))) {
    .angle--both-left-left::before, .angle--both-left-left::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid; }
    .angle--both-left-left::before {
      top: 0;
      border-width: 8vw 100vw 0 0;
      border-color: #fff transparent transparent transparent; }
    .angle--both-left-left::after {
      bottom: 0;
      border-width: 0 100vw 8vw 0;
      border-color: transparent transparent #fff transparent; } }

.angle--both-right-right {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% calc(100% - 7vw), 0 100%); }
  @supports not (clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% calc(100% - 7vw), 0 100%)) {
    .angle--both-right-right::before, .angle--both-right-right::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid; }
    .angle--both-right-right::before {
      top: 0;
      border-width: 8vw 0 0 100vw;
      border-color: #fff transparent transparent transparent; }
    .angle--both-right-right::after {
      bottom: 0;
      border-width: 0 0 8vw 100vw;
      border-color: transparent transparent #fff transparent; } }

.angle--both-left-right {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%); }
  @supports not (clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%)) {
    .angle--both-left-right::before, .angle--both-left-right::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid; }
    .angle--both-left-right::before {
      top: 0;
      border-width: 8vw 100vw 0 0;
      border-color: #fff transparent transparent transparent; }
    .angle--both-left-right::after {
      bottom: 0;
      border-width: 0 0 8vw 100vw;
      border-color: transparent transparent #fff transparent; } }

.angle--both-right-left {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 calc(100% - 7vw)); }
  @supports not (clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 calc(100% - 7vw))) {
    .angle--both-right-left::before, .angle--both-right-left::after {
      content: "";
      position: absolute;
      left: 0;
      z-index: 10;
      display: block;
      border-style: solid; }
    .angle--both-right-left::before {
      top: 0;
      border-width: 8vw 0 0 100vw;
      border-color: #fff transparent transparent transparent; }
    .angle--both-right-left::after {
      bottom: 0;
      border-width: 0 100vw 8vw 0;
      border-color: transparent transparent #fff transparent; } }

.angle__content {
  display: block;
  width: 100%;
  height: auto; }

.angle--colour {
  color: #fff;
  background-color: #2196F3;
  text-align: center;
  padding: 10% 0; }