在CSS中连接带箭头的框

Question

我想知道是否可以使用CSS进行此类设计？

我非常感谢任何一段代码。

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＆amp; box2所以它会隐藏'额外'边框。

将为您提供基本设计。 （根据您的需要改变尺寸） 你必须通过创建CSS三角形来添加箭头，或者使用图像和绝对定位它们。