<div></div>

DIV {
  --offset: 1rem;
  --bg-size: calc(100% - var(--offset) * 2);
  
  background: 
    linear-gradient(turquoise, turquoise),
    linear-gradient(turquoise, turquoise);
  background-repeat: no-repeat;
  background-size: 
    100% var(--bg-size), 
    var(--bg-size) 100%;
  background-position: 
    0 var(--offset),
    var(--offset) 0;
}


// 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);
  }
}