рисовать диагональные линии на фоне div с помощью CSS

.crossed {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}

<textarea class="crossed"></textarea>

.diag {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}

<div class="diag" style="width: 300px; height: 100px;"></div>

.crossed {
    position: relative;
    width: 300px;
    height: 300px;
}

.crossed:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    bottom: 1px;
    border-width: 149px;
    border-style: solid;
    border-color: black white;
}

.crossed:after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 0;
    bottom: 0;
    border-width: 149px;
    border-style: solid;
    border-color: white transparent;
}

<div class='crossed'></div>

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}

<div class='borders'></div>

.r1 { width: 10px;
      height: 0;
      border-width: 40px;
      border-style: solid;
      border-color: red blue;
      margin-bottom: 10px; }
.r2 { width: 0;
      height: 10px;
      border-width: 40px;
      border-style: solid;
      border-color: blue transparent; }

<div class='r1'></div><div class='r2'></div>

.diag {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}

<div class="diag" style="width: 200px; height: 150px; border: 1px solid; resize: both; overflow: auto"></div>

.cross {
  position: relative;
}
.cross::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.cross1::after {
  background:
    linear-gradient(to top left, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%);
}

.cross2::after {
  background:
    linear-gradient(to top left, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%);
  opacity: 0.35;
}

div { width: 180px; text-align: justify; display: inline-block; margin: 20px; }

<div class="cross cross1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>

<div class="cross cross2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>

.cross {
  width:150px;
  height: 150px;
  border: 2px solid #555;
  border-radius: 5px;
  position: relative;
  background: #efefef;
}

.cross .diag1{
  position: absolute;
  width:100%; height:100%;
  clip-path: polygon(90% 0, 100% 0%, 10% 100%, 0% 100%);
  background: #311B92;
}

.cross .diag2{
  position: absolute;
  width:100%; height:100%;
  clip-path: polygon(0 0, 10% 0, 100% 100%, 90% 100%);
  background: #1B5E20;
}

<div class="cross">
  <div class="diag1"></div>
  <div class="diag2"></div>
</div>

.crossed {
    width: 200px;
    height: 200px;
    border:solid 1px;
    background-color: rgb(210, 137, 226);
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 15px,
      #ccc 10px,
      #ccc 20px
        ),
      repeating-linear-gradient(
        135deg,
        transparent,
        transparent 15px,
        #ccc 10px,
        #ccc 20px
      );
}

<div class='crossed'>Hello world</div>

const objToStyleString = (obj) => {
  const reducer = (acc, curr) => acc += curr + ": " + obj[curr] + ";"; 
  return Object.keys(obj).reduce(reducer, "")
};

const lineStyle = (xy1, xy2, borderStyle) => {
  const p1 = {x: xy1[0], y: xy1[1]};
  const p2 = {x: xy2[0], y: xy2[1]};
  
  const a = p2.x - p1.x;
  const xOffset = p1.x;
  const b = p2.y - p1.y;
  const yOffset = p1.y;
  
  const c = Math.sqrt(a*a + b*b);
  
  const ang = Math.acos(a/c);
  
  const tX1 = `translateX(${-c/2 + xOffset}px) `;
  const tY1 = `translateY(${yOffset}px) `;
  const rot = `rotate(${ang}rad) `;
  const tX2 = `translateX(${c/2}px) `;
  const tY2 = `translateY(${0}px) `;
  
  return {
    "width": Math.floor(c) + "px",
    "height": "0px",
    "border-top": borderStyle,
    "-webkit-transform": tX1+tY1+rot+tX2+tY2,
    "position": "relative",
    "top": "0px",
    "left": "0px",
    "box-sizing": "border-box",
  };
};

function drawLine(parent, p1, p2, borderStyle) {
  const style = lineStyle(p1, p2, borderStyle);
  const line = document.createElement("div");
  line.style = objToStyleString(style);
  parent.appendChild(line);
}

drawLine(container, [100,5], [25,195], "1px dashed purple");
drawLine(container, [100,100], [190,190], "1px solid blue");
drawLine(container, [25,150], [175,150], "2px solid red");
drawLine(container, [25,10], [175,20], "5px dotted green");

#container {
  background-color: #BCBCBC;
  width: 200px;
  height: 200px;
  padding: 0; 
  margin: 0;
}

<div id="container">
</div>