如何用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，網格是垂直的。