Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .globe
  .row.row-01
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile.bottom
    .tile.bottom
    .tile.bottom
    .tile.bottom-left-corner
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile
  .row.row-02
    .tile
    .tile
    .tile
    .tile
    .tile
    .tile.bottom-right-corner
    .tile.bottom
    .tile.full
    .tile.tile-09.full
    .tile.tile-10.full
    .tile.bottom-left
    .tile.tile-12.top
    .tile.tile-13.full
    .tile.tile-14.full
    .tile.tile-15.full
    .tile.tile-16.full
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19
    .tile.tile-20
    .tile.tile-21
    .tile.tile-22
    .tile.tile-23
    .tile.tile-24
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27.bottom
    .tile.tile-28.bottom
    .tile.tile-29.full
    .tile.tile-30.bottom
    .tile.tile-31.bottom
    .tile.tile-32
    .tile.tile-33
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-03
    .tile.tile-01.top-left-corner
    .tile.tile-02.right
    .tile.tile-03.full
    .tile.tile-04.full
    .tile.tile-05.full
    .tile.tile-06.full
    .tile.tile-07.full
    .tile.tile-08.full
    .tile.tile-09.full
    .tile.tile-10.top
    .tile.tile-11.top
    .tile.tile-12.top
    .tile.tile-13
    .tile.tile-14.full
    .tile.tile-15.top
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19.bottom-right-corner
    .tile.tile-20.top-right-to-bottom-left
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23.full
    .tile.tile-24.full
    .tile.tile-25.full
    .tile.tile-26.full
    .tile.tile-27.full
    .tile.tile-28.full
    .tile.tile-29.full
    .tile.tile-30.full
    .tile.tile-31.full
    .tile.tile-32.full
    .tile.tile-33.full
    .tile.tile-34.full
    .tile.tile-35.full
    .tile.tile-36.full
  .row.row-04
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03.top-left-corner
    .tile.tile-04
    .tile.tile-05.top-right-corner
    .tile.tile-06.full
    .tile.tile-07.full
    .tile.tile-08.full
    .tile.tile-09.full
    .tile.tile-10.bottom-left-half
    .tile.tile-11.full
    .tile.tile-12.full
    .tile.tile-13.bottom-left-corner
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18.right
    .tile.tile-19.bottom-right-half
    .tile.tile-20.full
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23.full
    .tile.tile-24.full
    .tile.tile-25.full
    .tile.tile-26.full
    .tile.tile-27.full
    .tile.tile-28.full
    .tile.tile-29.full
    .tile.tile-30.full
    .tile.tile-31.full
    .tile.tile-32.full
    .tile.tile-33
    .tile.tile-34.right
    .tile.tile-35.top-left-corner
    .tile.tile-36
  .row.row-05
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06.right
    .tile.tile-07.full
    .tile.tile-08.full
    .tile.tile-09.full
    .tile.tile-10.full
    .tile.tile-11.full
    .tile.tile-12.top
    .tile.tile-13.top-left-corner
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18.bottom
    .tile.tile-19.top
    .tile.tile-20.top
    .tile.tile-21.full
    .tile.tile-22.top
    .tile.tile-23.left
    .tile.tile-24.full
    .tile.tile-25.full
    .tile.tile-26.full
    .tile.tile-27.full
    .tile.tile-28.full
    .tile.tile-29.full
    .tile.tile-30.full
    .tile.tile-31.full
    .tile.tile-32.top-left-corner
    .tile.tile-33
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-06
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06.top-right-corner
    .tile.tile-07.full
    .tile.tile-08.full
    .tile.tile-09.full
    .tile.tile-10.full
    .tile.tile-11.top-left-corner
    .tile.tile-12
    .tile.tile-13
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18.full
    .tile.tile-19.bottom
    .tile.tile-20.bottom-left-corner
    .tile.tile-21.top-right-and-bottom-left
    .tile.tile-22.right
    .tile.tile-23.full
    .tile.tile-24.full
    .tile.tile-25.full
    .tile.tile-26.full
    .tile.tile-27.full
    .tile.tile-28.full
    .tile.tile-29.full
    .tile.tile-30.full
    .tile.tile-31.top-right-corner
    .tile.tile-32
    .tile.tile-33
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-07
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07.top-right-corner
    .tile.tile-08.full
    .tile.tile-09.left
    .tile.tile-10.top-right-corner
    .tile.tile-11.bottom-left-corner
    .tile.tile-12
    .tile.tile-13
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17.right
    .tile.tile-18.full
    .tile.tile-19.full
    .tile.tile-20.full
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23.full
    .tile.tile-24.full
    .tile.tile-25.top
    .tile.tile-26.full
    .tile.tile-27.full
    .tile.tile-28.full
    .tile.tile-29.full
    .tile.tile-30.top-left-half
    .tile.tile-31
    .tile.tile-32
    .tile.tile-33
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-08
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08.top-right-corner
    .tile.tile-09.top
    .tile.tile-10.bottom-left-half
    .tile.tile-11
    .tile.tile-12
    .tile.tile-13
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17.right
    .tile.tile-18.full
    .tile.tile-19.full
    .tile.tile-20.full
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23.top
    .tile.tile-24.top-left-corner
    .tile.tile-25
    .tile.tile-26.top-right-half
    .tile.tile-27.top-left-corner
    .tile.tile-28.top-right-corner
    .tile.tile-29.top-left-to-bottom-right
    .tile.tile-30
    .tile.tile-31.top-left-corner
    .tile.tile-32
    .tile.tile-33
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-09
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08
    .tile.tile-09
    .tile.tile-10
    .tile.tile-11.full
    .tile.tile-12.full
    .tile.tile-13.bottom-left-half
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17.top-right-corner
    .tile.tile-18.top
    .tile.tile-19.top
    .tile.tile-20.full
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23.top-left-half
    .tile.tile-24
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27
    .tile.tile-28
    .tile.tile-29.bottom-left-corner
    .tile.tile-30.bottom-right-half
    .tile.tile-31
    .tile.tile-32
    .tile.tile-33
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-10
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08
    .tile.tile-09
    .tile.tile-10
    .tile.tile-11.full
    .tile.tile-12.full
    .tile.tile-13.full
    .tile.tile-14.full
    .tile.tile-15.bottom-left-corner
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19
    .tile.tile-20.full
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23
    .tile.tile-24
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27
    .tile.tile-28
    .tile.tile-29.top-left-corner
    .tile.tile-30.top-left-corner
    .tile.tile-31
    .tile.tile-32.top-right-half
    .tile.tile-33.bottom-left-half
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-11
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08
    .tile.tile-09
    .tile.tile-10
    .tile.tile-11.top-right-half
    .tile.tile-12.full
    .tile.tile-13.full
    .tile.tile-14.full
    .tile.tile-15.top-left-corner
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19
    .tile.tile-20.right
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23.bottom-right-corner
    .tile.tile-24
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27
    .tile.tile-28
    .tile.tile-29
    .tile.tile-30
    .tile.tile-31.bottom-right-half
    .tile.tile-32.bottom-left-half
    .tile.tile-33.bottom-left-half
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-12
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08
    .tile.tile-09
    .tile.tile-10
    .tile.tile-11
    .tile.tile-12.full
    .tile.tile-13.full
    .tile.tile-14.top-left-half
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19
    .tile.tile-20.right
    .tile.tile-21.full
    .tile.tile-22.left
    .tile.tile-23.top-right-corner
    .tile.tile-24
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27
    .tile.tile-28
    .tile.tile-29
    .tile.tile-30.right
    .tile.tile-31.full
    .tile.tile-32.full
    .tile.tile-33.full
    .tile.tile-34.bottom-left-corner
    .tile.tile-35
    .tile.tile-36
  .row.row-13
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08
    .tile.tile-09
    .tile.tile-10
    .tile.tile-11.bottom-right-corner
    .tile.tile-12.full
    .tile.tile-13.top-left-corner
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19
    .tile.tile-20.top-right-corner
    .tile.tile-21.top
    .tile.tile-22
    .tile.tile-23
    .tile.tile-24
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27
    .tile.tile-28
    .tile.tile-29
    .tile.tile-30.top-right-corner
    .tile.tile-31.top-left-corner
    .tile.tile-32.top-right-half
    .tile.tile-33.full
    .tile.tile-34.top-left-corner
    .tile.tile-35
    .tile.tile-36
  .row.row-14
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08
    .tile.tile-09
    .tile.tile-10
    .tile.tile-11.right
    .tile.tile-12.left
    .tile.tile-13
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19
    .tile.tile-20
    .tile.tile-21
    .tile.tile-22
    .tile.tile-23
    .tile.tile-24
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27
    .tile.tile-28
    .tile.tile-29
    .tile.tile-30
    .tile.tile-31
    .tile.tile-32
    .tile.tile-33
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36.top-left-corner
  .row.row-15
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08
    .tile.tile-09
    .tile.tile-10
    .tile.tile-11.top-right-corner
    .tile.tile-12
    .tile.tile-13
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19
    .tile.tile-20
    .tile.tile-21
    .tile.tile-22
    .tile.tile-23
    .tile.tile-24
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27
    .tile.tile-28
    .tile.tile-29
    .tile.tile-30
    .tile.tile-31
    .tile.tile-32
    .tile.tile-33
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-16
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03
    .tile.tile-04
    .tile.tile-05
    .tile.tile-06
    .tile.tile-07
    .tile.tile-08
    .tile.tile-09
    .tile.tile-10
    .tile.tile-11
    .tile.tile-12.bottom-right-corner
    .tile.tile-13
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16
    .tile.tile-17
    .tile.tile-18
    .tile.tile-19
    .tile.tile-20
    .tile.tile-21
    .tile.tile-22
    .tile.tile-23
    .tile.tile-24.bottom
    .tile.tile-25
    .tile.tile-26
    .tile.tile-27.bottom
    .tile.tile-28.bottom
    .tile.tile-29.bottom
    .tile.tile-30.bottom
    .tile.tile-31.bottom
    .tile.tile-32.bottom
    .tile.tile-33.bottom
    .tile.tile-34
    .tile.tile-35
    .tile.tile-36
  .row.row-17
    .tile.tile-01
    .tile.tile-02
    .tile.tile-03.bottom
    .tile.tile-04.bottom
    .tile.tile-05.bottom
    .tile.tile-06.bottom
    .tile.tile-07.bottom
    .tile.tile-08.bottom
    .tile.tile-09.full
    .tile.tile-10.bottom
    .tile.tile-11.full
    .tile.tile-12.full
    .tile.tile-13.bottom
    .tile.tile-14
    .tile.tile-15
    .tile.tile-16.bottom
    .tile.tile-17.full
    .tile.tile-18.full
    .tile.tile-19.full
    .tile.tile-20.full
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23.full
    .tile.tile-24.full
    .tile.tile-25.full
    .tile.tile-26.full
    .tile.tile-27.full
    .tile.tile-28.full
    .tile.tile-29.full
    .tile.tile-30.full
    .tile.tile-31.full
    .tile.tile-32.full
    .tile.tile-33.full
    .tile.tile-34.full
    .tile.tile-35.full
    .tile.tile-36.top-left-corner
  .row.row-18
    .tile.tile-01.full
    .tile.tile-02.full
    .tile.tile-03.full
    .tile.tile-04.full
    .tile.tile-05.full
    .tile.tile-06.full
    .tile.tile-07.full
    .tile.tile-08.full
    .tile.tile-09.full
    .tile.tile-10.full
    .tile.tile-11.full
    .tile.tile-12.full
    .tile.tile-13.full
    .tile.tile-14.full
    .tile.tile-15.full
    .tile.tile-16.full
    .tile.tile-17.full
    .tile.tile-18.full
    .tile.tile-19.full
    .tile.tile-20.full
    .tile.tile-21.full
    .tile.tile-22.full
    .tile.tile-23.full
    .tile.tile-24.full
    .tile.tile-25.full
    .tile.tile-26.full
    .tile.tile-27.full
    .tile.tile-28.full
    .tile.tile-29.full
    .tile.tile-30.full
    .tile.tile-31.full
    .tile.tile-32.full
    .tile.tile-33.full
    .tile.tile-34.full
    .tile.tile-35.full
    .tile.tile-36.full

              
            
!

CSS

              
                // This provides us trigonometric functions (sin, cos, pi...)
@import 'compass/css3';

$animation-duration: 30s;
$radius: 200px;
$rows: 18;
$columns: 36;
$black: rgb(20, 20, 30);
$color-sea: hsla(210, 70%, 40%, .30);
$color-earth: hsl(27, 53%, 65%);

$perimeter: 2*pi()*$radius;
$tile-width: $perimeter/$columns;
$tile-height: $perimeter/(2*$rows);

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  background-color: $black;
  perspective: $radius*10;
}

.globe {
  // Center horizontally
  margin: auto;  
}

.globe,
.globe .row {
  // The tiles are transformed in the same 3D space of the sphere
  transform-style: preserve-3d;
  .tile {
    // The :before and :after pseudo-elements in the tiles have to be transformed in their own, separated 3D space
    transform-style: flat;
  }
}

// Basic layout
.row {
  padding: 0;
  width: 0;
  position: relative;
  .tile {
    width: $tile-width;
    height: $tile-height;
    display: block;
    margin: 0;
    position: absolute;
    left: -$tile-width/2;
    top: -$tile-height/2;
    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}

@function toRadians($degrees) {
  @return $degrees*pi()/180;
}

// This part basically builds the actual sphere, i.e. gives each tile its position, orientation and size
// Yes, a bit of magic formulas...

@for $row from 0 through $rows {  
  $angle-from-equator-at-top: 90 - 180*$row/$rows;
  $angle-from-equator-at-bottom: 90 - 180*($row+1)/$rows;
  $angle-from-equator-at-center: ($angle-from-equator-at-top + $angle-from-equator-at-bottom) / 2;
  $is-top-half: $row < $rows/2;
  $angle-at-maximum-width: if($is-top-half, $angle-from-equator-at-bottom, $angle-from-equator-at-top);
  $angle-at-minimum-width: if($is-top-half, $angle-from-equator-at-top, $angle-from-equator-at-bottom);
  $angle-at-maximum-width-in-radians: toRadians($angle-at-maximum-width);
  $scale-x-maximum: cos($angle-at-maximum-width-in-radians);
  $side-long: $tile-width * $scale-x-maximum;
  $angle-at-minimum-width-in-radians: toRadians($angle-at-minimum-width);
  $scale-x-minimum: cos($angle-at-minimum-width-in-radians);
  $side-short: max($tile-width * $scale-x-minimum,  1px);
  $side-vertical: $tile-height;
  $viewer-distance: 1px;
  $sin: $viewer-distance*($side-long - $side-short) / ($side-short*$side-vertical);
  $angle: if($is-top-half, asin($sin), - asin($sin));
  $cos: cos($angle);
  $factor: $side-vertical / ($side-vertical/2 + $viewer-distance*($side-vertical*$cos - $side-vertical/2) / ($viewer-distance + $side-vertical*$sin));
  @for $column from 0 through $columns {
    .row:nth-child(#{$row+1}) .tile:nth-child(#{$column+1}) {
      transform: rotateY(#{360*$column/$columns}deg) rotateX(#{$angle-from-equator-at-center}deg) translateZ($radius) scaleX($scale-x-maximum) scaleY($factor);
      perspective: $viewer-distance;
      &:before,
      &:after {
        transform: rotateX(#{$angle}rad);
        transform-origin: if($is-top-half, bottom, top);
      }
    }
  }
}

// Animations

.globe {
  animation: globe-rotation $animation-duration linear infinite;
}

.tile:after {
  animation: animate-brightness $animation-duration linear alternate infinite;
}

// Applying a different animation-delay to each column adds the lighting animation effect

@for $column from 0 through $columns {
  .tile:nth-child(#{$column+1}):after {
    animation-delay: - $animation-duration*(1.125 + $column/$columns);
  }
}

// Let the globe spin

@keyframes globe-rotation {
  to {
    transform: rotateY(360deg);
  }
}

// Simulate light

@keyframes animate-brightness {
  0%, 100% {
    background-color: white;
    opacity: .5;
  }
  15%, 85% {
    background-color: white;
    opacity: 0;
  }
  16%, 84% {
    background-color: $black;
  }
  30%, 70% {
    background-color: $black;
    opacity: 1;
  }
}

// Tiles

.tile {
  $diagonal-half: 25.5%;
  $half: 50%;
  &:before {
    background-color: $color-sea;
  }
  &.full:before {
    background-color: $color-earth;
  }
  &.top:before {
    background: linear-gradient(to bottom, $color-earth 50%, $color-sea 50%);
  }
  &.right:before {
    background: linear-gradient(to right, $color-sea 50%, $color-earth 50%);
  }
  &.bottom:before {
    background: linear-gradient(to bottom, $color-sea 50%, $color-earth 50%);
  }
  &.left:before {
    background: linear-gradient(to right, $color-earth 50%, $color-sea 50%);
  }
  &.top-left-half:before {
    background: linear-gradient(to bottom right, $color-earth $half, $color-sea $half);
  }
  &.top-right-half:before {
    background: linear-gradient(to bottom left, $color-earth $half, $color-sea $half);
  }
  &.bottom-right-half:before {
    background: linear-gradient(to top left, $color-earth $half, $color-sea $half);
  }
  &.bottom-left-half:before {
    background: linear-gradient(to top right, $color-earth $half, $color-sea $half);
  }
  &.top-left-corner:before {
    background: linear-gradient(to bottom right, $color-earth $diagonal-half, $color-sea $diagonal-half);
  }
  &.top-right-corner:before {
    background: linear-gradient(to bottom left, $color-earth $diagonal-half, $color-sea $diagonal-half);
  }
  &.bottom-right-corner:before {
    background: linear-gradient(to top left, $color-earth $diagonal-half, $color-sea $diagonal-half);
  }
  &.bottom-left-corner:before {
    background: linear-gradient(to top right, $color-earth $diagonal-half, $color-sea $diagonal-half);
  }
  &.top-left-to-bottom-right:before {
    background: linear-gradient(to bottom left, $color-sea $diagonal-half, $color-earth $diagonal-half, $color-earth 3*$diagonal-half, $color-sea 3*$diagonal-half);
  }
  &.top-right-to-bottom-left:before {
    background: linear-gradient(to bottom right, $color-sea $diagonal-half, $color-earth $diagonal-half, $color-earth 3*$diagonal-half, $color-sea 3*$diagonal-half);
  }
  &.top-left-and-bottom-right:before {
    background: linear-gradient(to bottom right, $color-earth $diagonal-half, $color-sea $diagonal-half, $color-sea 3*$diagonal-half, $color-earth 3*$diagonal-half);
  }
  &.top-right-and-bottom-left:before {
    background: linear-gradient(to bottom left, $color-earth $diagonal-half, $color-sea $diagonal-half, $color-sea 3*$diagonal-half, $color-earth 3*$diagonal-half);
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console