JSFiddle - React, Tailwind, and code Playground

HTML

<div class="diagonal-borders--frame">
  <div class="diagonal-borders--content">
    <div class="example">
      Oh, hello!
    </div>
  </div>
</div>

SCSS

.example {
  width: 200px;
  height: 200px;
  padding: 15px;
}

.diagonal-borders--frame {
    width: 12rem;
    background: red;
    padding: 30px;
    background: linear-gradient(135deg, transparent 2px, red 0) top left,
                linear-gradient(225deg, transparent 2px, red 0) top right,
                linear-gradient(315deg, transparent 2px, red 0) bottom right,
                linear-gradient(45deg, transparent 2px, red 0) bottom left;
    background-size: 50%;
    background-repeat: no-repeat;
}

.diagonal-borders--content {
    width: 100%;
    background: white;
    background: linear-gradient(135deg, transparent 1px, white 0) top left,                   linear-gradient(225deg, transparent 1px, white 0) top right,                   linear-gradient(315deg, transparent 1px, white 0) bottom right,
                linear-gradient(45deg, transparent 1px, white 0) bottom left;
    background-size: 50%;
    background-repeat: no-repeat;
}