html - 在 CSS 中用箭头连接框

Question

<分区>

Answer 1

我会那样做，

#box1, #box2 , #box3
{
    width: 25%;
    height: 25%;
    position: absolute;
}

#box1
{
    left: 25%;
    top: 25%;
    border-left: 2px dashed black;
    border-right: 1px dashed black;
    border-bottom: 2px dashed black;
    z-index: 1;
}
 #box2 
{
    right: 25%;
    top: 25%;
    border-left: 1px dashed black;
    border-right: 2px dashed black;
    border-bottom: 2px dashed black;
    z-index: 1;
}
 #box3
{
    right: 37.5%;
    top: 40%;
    z-index: 2;
}

box3 位于 box1 和 box2 之上，因此它将隐藏“额外”边框。

这将为您提供基本设计。 (根据您的需要更改尺寸) 您将必须通过创建 CSS 三 Angular 形或使用图像并绝对定位它们来添加箭头。