Decorative corners

Decorative corners using multiple backgrounds

by mrtoxas

HTML

<div class="block">
  PROJECT MANAJEMENT
</div>

CSS

body {
  padding: 20px;
}

.block {
  display: inline-block;
  padding: 10px;
  background: linear-gradient(red, red), linear-gradient(red, red), linear-gradient(red, red), linear-gradient(red, red);
  background-position: top left, bottom right;
  background-size: 20px 2px, 2px 20px, 2px 20px, 20px 2px;
  background-repeat: no-repeat;
}