Question

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

我尝试了使用:after伪选择器的方法，但我无法达到所有要求：

当线条的颜色在下一个元素上方或下方时，颜色应该更改（并且应该可以通过CSS自定义）
带有该行的标题应该可以放在下一部分的引导框内（见下面的原型）

您能否提出一些可持续和可扩展的解决方案？（我在想：svg？）

这是我的非工作原型：

＆＃13;

.title-with-stripe {
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}
.title-with-stripe:after {
    border-left: 1px solid rgba(0, 0, 0, 0.7);
    position: absolute;
    content: '';
    height: 100px;
    top: 110%;
    left: 50%;
}
.box {
  background: red;
  color: white;
  padding: 50px 0;
}
.box-info {
  background: green;
  padding: 50px 0;
}

＆＃13;

<p class="title-with-stripe">Companies</p>
<div class="box">the line in here should change color, and ideally we can define that color
<p class="title-with-stripe">Contact info</p>
</div>
<div class="box-info">half of the line should spill in here</div>

＆＃13;

Answer 1

before，after和不透明度的组合可行，但它不是最优雅的代码。

＆＃13;

.title-with-stripe {
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}
.title-with-stripe:before {
    border-left: 1px solid rgba(0, 0, 0, 0.7);
    position: absolute;
    content: '';
    height: 50px;
    top: 110%;
    left: 50%;
}
.title-with-stripe:after {
    border-left: 1px solid #BADA55;
    position: absolute;
    content: '';
    height: 50px;
    top: calc(110% + 50px);
    left: 50%;
}
.box {
  background: red;
  color: white;
  padding: 50px 0;
}

＆＃13;

<p class="title-with-stripe">Companies</p>
<div class="box">the line in here should change color, and ideally we can define that color</div>

＆＃13;

Answer 2

我建议将线放在其余部分之上并使用mix-blend-mode：

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

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

Answer 3

在我之前的回答中，我发表了评论＆＃34;我会以另一种方式做到这一点＆＃34;，这就是我的意思：

＆＃13;

.title-with-stripe {
    position: relative;
    text-align: center;
}
.box {
  background: red;
  color: white;
}
.box-info {
  background: green;
}

.stripe-bottom {
  position: relative;
  padding-bottom: 50px;
}

.stripe-bottom:after {
  content: "";
  display: block;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
}

.stripe-top {
  position: relative;
  padding-top: 60px;
}

.stripe-top:before {
  content: "";
  display: block;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
}

.type1:after, .type1:before {
  background: #CF4D2B;
}
.type2:after, .type2:before {
  background: green;
}
.type3:after, .type3:before {
  background: blue;
}
.type4:after, .type4:before {
  background: orange;
}
p {
  margin: 0;
  }

＆＃13;

<p class="title-with-stripe stripe-bottom type1">Companies</p>
<div class="box stripe-top type2">the line in here should change color, and ideally we can define that color
<p class="title-with-stripe stripe-bottom type3">Contact info</p>
</div>
<div class="box-info stripe-top type4">half of the line should spill in here</div>

＆＃13;

根据应用的背景颜色应用更改颜色的边框

3 个答案: