<div></div>

DIV {
  --offset: 1rem;
  --bg-size: calc(100% - var(--offset) * 2);
  
  background: linear-gradient(45deg, crimson, 20%, gold, 80%, turquoise) no-repeat;
  background-size: var(--bg-size) var(--bg-size);
  background-position: var(--offset) var(--offset);
}


// Helpers
BODY {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Trebuchet MS, Arial, sans-serif;
  line-height: 1.3;
}

DIV {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  height: 200px;
  outline: 2px solid #DDD;
  
  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: repeating-linear-gradient(-45deg,
    #EEE, #EEE 1px, transparent 0, transparent .5rem);
  }
}