Javascript 应用根据其背景颜色改变颜色的边框'；申请于

我需要实现以下内容。带有垂直线的标题，垂直线穿过下一个容器元素的下方（或上方）

我尝试了一种使用

：after

伪选择器的方法，但我无法达到所有要求：

当线条在下一个元素的上方或下方时，线条的颜色应该改变（并且应该可以由CSS独立定制）

带有行的标题应该可以放在下一节的方框内（见下面的原型）

你能提出一些可持续的、可扩展的解决方案吗？（我在想：svg？）

---

这是我的非工作原型：

。带条纹的标题{
位置：相对位置；
边缘底部：50px；
文本对齐：居中；
}
.带条纹的标题：后{
左边框：1px实心rgba（0,0,0,0.7）；
位置：绝对位置；
内容：''；
高度：100px；
最高：110%；
左：50%；
}
.盒子{
背景：红色；
颜色：白色；
填充：50px0；
}
.box信息{
背景：绿色；
填充：50px0；
}

公司

这里的线条应该改变颜色，理想情况下我们可以定义颜色 联系人信息

---

这行的一半应该在这里溢出前面的，后面的，以及不透明性的组合会起作用，尽管这不是最优雅的代码

。带条纹的标题{
位置：相对位置；
边缘底部：50px；
文本对齐：居中；
}
.带条纹的标题：之前{
左边框：1px实心rgba（0,0,0,0.7）；
位置：绝对位置；
内容：''；
高度：50px；
最高：110%；
左：50%；
}
.带条纹的标题：后{
左边框：1px实心#BADA55；
位置：绝对位置；
内容：''；
高度：50px；
顶部：计算（110%+50px）；
左：50%；
}
.盒子{
背景：红色；
颜色：白色；
填充：50px0；
}

公司

---

此处的线条应该改变颜色，理想情况下，我们可以定义该颜色，我建议将线条置于其余线条之上，并使用混合模式：

---

这将导致该行对后面的颜色进行一些考虑，以确定最终的颜色。

在我之前的回答中，我评论说“我会用另一种方式来做”，我的意思如下：

。带条纹的标题{
位置：相对位置；
文本对齐：居中；
}
.盒子{
背景：红色；
颜色：白色；
}
.box信息{
背景：绿色；
}
.条纹底{
位置：相对位置；
填充底部：50px；
}
.条纹底：后{
内容：“；
显示：块；
高度：50px；
位置：绝对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
宽度：1px；
}
.条纹上衣{
位置：相对位置；
填充顶部：60px；
}
.条纹上衣：以前{
内容：“；
显示：块；
高度：50px；
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
宽度：1px；
}
.type1:之后，.type1:之前{
背景：#CF4D2B；
}
.type2:之后，.type2:之前{
背景：绿色；
}
.type3:之后，.type3:之前{
背景：蓝色；
}
.type4:之后，.type4:之前{
背景：橙色；
}
p{
保证金：0；
}

公司
这里的线条应该改变颜色，理想情况下我们可以定义颜色
联系人信息

一半的线应该在这里溢出

什么与原型不兼容？它仅仅是颜色吗？您可以为以下部分使用一些rgba

背景色，同时为
伪元素之后添加一些较低的
z索引
。是否应将
div
置于行的顶部，并且div的背景色应为rgba？-<代码>{background color:rgba（255,0,0,0.3）；}
尝试在Objects中使用混合模式标题和下方块之间的距离是否保持不变/预定义？可能是，我不介意在之前和之后都使用，尽管检查我问题的（2）条件？这一个的问题是除了使用“不透明”或“rgba”之外你不可能有完全不同的颜色，因为：after行位于：before.之上。。（尝试将border left设置为#fff for:after并移除不透明度）我不理解第二个条件。我认为线条必须与背景颜色类似，我改变了这一点，更新了代码段。不过，老实说，我只想在容器中添加一个类，比如“.with line”，然后绝对定位上容器和下容器的线条，给它们另一种颜色。感谢这两种选择：）我现在就用这个，尽管第二个可能会派上用场。谢谢你的提示，但是浏览器支持肯定有问题