transforms

CSS3 2D Transforms

✖ Simple CSS

:root {
  --width: 300px;
  --height: 100px;
  --top-color: #f44336;
  --bottom-color: #2196F3;
  --vertical-angle: 108.5deg;
  --horizontal-angle: 18.5deg;
}

.separator {
  width: var(--width);
  height: var(--height);
  overflow: hidden;
}

.separator::before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--top-color);
  transform: skewY(calc(-1 * var(--horizontal-angle)));
  transform-origin: bottom left;
}

.separator::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--bottom-color);
  transform: skewY(calc(-1 * var(--horizontal-angle)));
  transform-origin: bottom left;
}

Reversed

.separator.reverse::before,
.separator.reverse::after {
  transform: skewY(var(--horizontal-angle));
  transform-origin: bottom right;
}

Vertical

.separator.vertical::before,
.separator.vertical::after {
  transform: skewY(var(--vertical-angle));
}

Reversed Vertical

.separator.vertical.reverse {
  position: relative;
}

.separator.vertical.reverse::before {
  position: absolute;
  transform: skewY(calc(-1 * var(--vertical-angle)));
  transform-origin: bottom left;
}

.separator.vertical.reverse::after {
  position: absolute;
  transform: skewY(calc(-1 * var(--vertical-angle)));
  transform-origin: top right;
}

Notes:

• 👎 Must calculate desired angle manually
• 👎 Must set corrosponding element height value manually
• 👎 Requires the use of generated content
• 👎 Further control is limited
  • e.g. creating a shadow effect using box-shadow

✖ Generated Content

Cannot be used with the ::before and ::after pseudo-elements as it relies on them already to generate the HTML content for the separator.

✖ Cross Browser Support

Partial support

Supported in all major browsers, with the exception of Opera Mini.

✖ Performance

Demo

View Demo, Play on CodePen, or inspect the source files.