shapes

CSS Shapes

✖ Simple CSS

:root {
  --width: 100%;
  --height: 100px;
  --top-color: #f44336;
  --bottom-color: #2196F3;
}

.separator {
  position: relative;
  width: var(--width);
  height: var(--height);
}

.separator::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--top-color);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

.separator::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--bottom-color);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

Reversed

.separator.reverse::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.separator.reverse::after {
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

Reversed Vertical

.separator.vertical.reverse::before {
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

.separator.vertical.reverse::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

Notes:

• 👍 The angle is controlled by the element height value
• 👎 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

✖ Performance

Demo

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