html - 用CSS连接带有箭头的框

Closed. This question is off-topic. It is not currently accepting answers. Learn more。
想改进这个问题吗？Update the question所以堆栈溢出的值小于aa>。
6年前关闭。
我想知道是否有可能用CSS做这样的设计？
我将非常感谢任何一段代码。

最佳答案

我会那样做，

#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三角形，或者使用图像和绝对位置来添加箭头。