Show diagonal parallel lines for boundary

Question

I have div and inside this div, I am currently showing boundary on all sides using box-shadow property. This boundary is filled with grey color and I want to change this filled color with diagonal lines with 150deg parallel to each other. I have been trying so many things to get this but I am not able to achieve this.

Below is current state. This is from all four sides.

And I want to achieve this.

Below is my code:

test.component.ts:

  private testStyles(): any {
    const marginPrefix = scale < 1 ? '-' : '';
    return {
      margin: '3vh auto',
      width: '210mm',
      height: '297mm',
      border: '1px black solid',
      background: 'white',
      transform: 'scale(1)'
    };
  }

test.component.html:

<div
  class="live-preview"
  id="template"
  [ngStyle]="getStyles()">
  <another-comp-1>
    <another-comp-2>
    </another-comp-2>
  </another-comp-1>
  <another-comp-3 class="troubleshoot-info"> </another-comp-3>
</div>

test.component.scss:

#template {
  position: relative;
}

.live-preview {
  box-shadow: 0px 0px 0px 5mm var(--ds-color-grey-200) inset;
}

Can someone tell me how to achieve this? Any kind of help would be appreciated.

Answer 1

You can use border-image:

.box {
  width: 300px;
  height: 200px;
  margin: 50px;
  border-image:
    repeating-linear-gradient(-45deg,red 0 2px,#ccc 0 10px)
    20/20px/20px; /* they all need to be equal and first one without unit */
}

<div class="box">
 some content here
</div>