在CSS中从一个正方形的中间开始制作四条半对角线

Question

我试图让旋转正方形的四条对角线从中间开始，慢慢向正方形的边界增长。

这就是我目前所得到的：

<div class="container">
<div class="diagonal1"></div>
<div class="diagonal2"></div>
<div class="diagonal3"></div>
<div class="diagonal4"></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;
}

但正如你在这支笔上看到的https://codepen.io/janhoegs03/pen/MWGOmQN，对角线的宽度从边缘开始，而不是从中间开始。我现在只实现了一个对角线，但我如何实现这样的布局？

输出如下所示：https://i.stack.imgur.com/QBiYX.jpg(箭头表示线条的生长方向(

Answer 1

您可能只需要使用渐变并通过背景大小调整其大小/设置其动画

演示您可以在这里运行的想法的片段：

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>