如何用CSS或SVG连接离子网格中的三个方块？

Question

我有一个1行乘3列ion-grid ：

我想做的是将绿色方块用虚线连接，就像这样（在图像上手绘线条）：

我曾想过在网格后面放一个虚线背景图片，但这就是我得到的：

当网格垂直定位时，线应该是垂直的，并且与水平位置相同（就像在第一个图像中一样）。

另外，我想到了在广场之间以某种方式绘制的SVG虚线（但我对SVG很新，所以我不太确定）。

这可以通过使用HTML，CSS或SVG来实现吗？ 你能想到什么不同吗？

编辑：添加代码

目前的HTML：

<div class="my-grid">
    <ion-grid fixed>
        <ion-row text-center>
            <ion-col col-12 col-sm>
                <div></div>
            </ion-col>
            <ion-col col-12 col-sm>
                <div></div>
            </ion-col>
            <ion-col col-12 col-sm>
                <div></div>
            </ion-col>
        </ion-row>
    </ion-grid>
</div>

目前的CSS：

ion-col div {
    height: 100px;
    width: 100px;
    background-color: green;
}
ion-col {
    border-width: thin;
    border-color: blue;
    border-style: solid;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

编辑： 在这里添加了Stackblitz示例。

Answer 1

通过定义研磨项目的网格区域，您可以实现重叠项目，从而添加虚线。 请参阅下面的我的代码段。

 ion-row { display: grid; } ion-col div { height: 100px; width: 100px; background-color: green; } ion-col { border-width: thin; border-color: blue; border-style: solid; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; } @media (min-width: 577px) { ion-row { grid-template-columns: 33% 33% 33%; grid-template-rows: 150px; } ion-col { grid-row: 1; } ion-col:nth-child(1) { grid-column: 1; } ion-col:nth-child(2) { grid-column: 2; } ion-col:nth-child(3) { grid-column: 3; } .dash-container { grid-column: 1 / 4; grid-row: 1; height: 3px; align-self: center; display: flex; justify-content: center; } .dash.horizontal { width: 66%; border-top: 3px dashed #000; height: 10px; } } @media (max-width: 576px) { ion-row { grid-template-rows: 33% 33% 33%; grid-template-columns: 150px; height: 450px; } ion-col { grid-column: 1; } ion-col:nth-child(1) { grid-row: 1; } ion-col:nth-child(2) { grid-row: 2; } ion-col:nth-child(3) { grid-row: 3; } .dash-container { grid-row: 1 / 4; grid-column: 1; height: 100%; width: 3px; align-self: center; display: flex; justify-content: center; margin-left: 50%; margin-top: 33%; } .dash.horizontal { height: 66%; border-left: 3px dashed #000; width: 0; } } 

 <div class="my-grid"> <ion-grid fixed> <ion-row text-center> <ion-col col-12 col-sm> <div></div> </ion-col> <ion-col col-12 col-sm> <div></div> </ion-col> <ion-col col-12 col-sm> <div></div> </ion-col> <div class="dash-container"> <div class="dash horizontal"></div> </div> </ion-row> </ion-grid> </div> 

我添加了一个新元素.dash-container ，它跨越整个网格并以自我为中心。 在该元素内是另一个元素，其宽度/高度仅为66％（如果每个宽度为33％，则为外框的中心点之间的距离）并且具有虚线边框。

我使用媒体查询将两个前片段合并为一个。 低于577px，网格是垂直的。