Html 让一支箭从一个部门射入另一个部门

我需要实现这样的目标：

我发现了类似的问题，但它们并不完全涵盖我的任务。下面是我发现的一个例子：

。蓝色背景{
背景颜色：蓝色；
边界半径：5px；
顶部：3em；
左：230像素；
填充：10px；
字体系列：Roboto，无衬线；
字体大小：14px；
线高：22px；
颜色：#313333；
显示器：flex；
对齐项目：居中；
宽度：260px；
}
.蓝色背景：：之后{
内容：''；
宽度：0px；
高度：0px；
边框顶部：25px实心透明；
左边框：37像素纯蓝色；
边框底部：25px实心透明；
右边框：0px实心透明；
位置：绝对位置；
最高：43%；
左：47%；
}
.子图像包装器{
最大宽度：260px；
保证金：自动；
img{
最大宽度：260px；
}
}

一些文本

您可以这样做：

.wrapper{
宽度：10em；
高度：2em；/*高度需要匹配。右：：在高度和宽度之后*/
显示器：flex；
}
.左{
背景颜色：浅蓝色；
宽度：50%；
}
.对{
背景颜色：浅粉色；
左边框：1px纯紫色；
宽度：50%；
位置：相对位置；
溢出：隐藏；
}
.对：以前{
高度：2米；/*匹配以上高度*/
宽度：2米；/*与上面的高度匹配*/
背景色：#b77681；
位置：绝对位置；
最高：50%；
左：0%；
内容：“；
边框：1px实心#864954；
变换：平移（-73%，-50%）旋转（45度）；
}

---

我鼓励您阅读更多有关

位置

属性的信息（在我们的案例中，特别是

绝对

和

相对

）。你可以找到一些介绍

根据您的问题，更改

.blue background:：after

中的

top

和

left

属性，以根据需要调整箭头的位置

以下是一个例子：