使用CSS连接盒子的箭头

Question

使用CSS连接盒子的箭头

htmlcss

4

我想知道是否可能使用CSS制作这样的设计？如果您有任何代码片段，我将不胜感激。输入图像描述

- Kiarash

12

你有尝试过吗？ - BoltClock

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- avrahamcool · Accepted Answer

我会这样做，

，仅供参考。

#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三角形或使用图像并将其绝对定位来添加箭头。