borders

Borders

✔ Simple CSS

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

.separator {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--height) var(--width) 0 0;
  border-color: var(--top-color) var(--bottom-color) transparent transparent;
}

Reversed

.separator.reverse {
  border-width: var(--height) 0 0 var(--width);
  border-color: var(--top-color) transparent transparent var(--bottom-color);
}

Vertical

.separator.vertical {
  border-width: var(--height) var(--width) 0 0;
  border-color: var(--left-color) var(--right-color) transparent transparent;
}

Reversed Vertical

.separator.vertical.reverse {
  border-width: 0 var(--width) var(--height) 0;
  border-color: transparent var(--left-color) var(--right-color) transparent;
}

Notes:

• 👍 The angle is controlled by the element height value
• 👎 Cannot be used with percentage measurement unit (%), any other unit is valid: (cm, em, ex, in, mm, pc, pt, px)
• 👎 For use in a full width or height scenarios matching the viewport, use viewport units: (vw, vh, vmin)
• 👎 Further control is limited
  • e.g. creating a shadow effect using box-shadow

✔ Generated Content

Can be used with the ::before and ::after pseudo-elements to generate HTML content for the separator without directly modifying your DOM.

Example

section {
  ...
}

section::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 300px 0 0;
  border-color: yellow black transparent transparent;
}

✔ Cross Browser Support

Supported on all browsers

✖ Performance

Demo

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