<div></div>

DIV {
  --line-witdh: 3rem;

  background:
    linear-gradient(
      to left top,
      transparent calc(50% - var(--line-witdh) / 2),
      turquoise 0, turquoise calc(50% + var(--line-witdh) / 2),
      transparent 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);
  }
}