Making four half diagonals starting from middle of a square in CSS-CodePudding

I'm trying to have the four diagonals of a rotated square to start from the middle and slowly grow towards the borders of the square.

This is what I got so far:

<div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
</div>

.container {
  margin: 75px auto;
  width: 200px;
  height: 200px;
  border: 5px dotted gray;
  rotate: 45deg;
}

.diagonal1 {
  /* width is starting from the top, not the middle */
  width: calc(50% * 1.4142135623730951);
  height: 2px;
  background-color: red;
  transform: rotate(45deg);
  transform-origin: left;
}

But as you can see on this pen https://codepen.io/janhoegs03/pen/MWGOmQN , the width of the diagonals starts from the edge and not from the middle. I only implemented one diagonal for now, but how would I achieve such a layout ?

The output would look something like this : https://imgur.com/04Zyqdj (the arrows are indicating the growth directions of the lines)

CodePudding user response：

You probably could just use a gradient and resize/animate it via background-size

snippet demonstrating the idea that you can run right here :

div {
  width: 30vmin;
  height: 30vmin;
  border: solid;
  background: linear-gradient(45deg, transparent calc(50% - 1px), red, transparent calc(50%   1px)), linear-gradient(135deg, transparent calc(50% - 1px), red, transparent calc(50%   1px));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1px;
  animation: growDiag 2s linear infinite alternate;
  rotate: 45deg;
}

@keyframes growDiag {
  10% {
    background-size: 1px;
  }
  90%, to {
    background-size: 100%;
  }
}

html {
  height: 100vh;
  display: grid;
}

body {
  margin: auto;
}

<div></div>