Wenden Sie einen Rahmen an, der die Farbe ändert, abhängig von der Hintergrundfarbe, unter der er angewendet wird:

Question

Ich muss Folgendes implementieren. Ein Titel mit einer vertikalen Linie, die unterhalb des nächsten Containerelements (oder darüber) überquert.

habe ich versucht, einen Ansatz der :after pseudoselector verwenden, aber ich kann alle Anforderungen nicht erreichen:

1. Die Farbe der Linie ändern sollte (und sollte unabhängig von CSS anpassbar sein), wenn es über oder unter dem nächsten Element
2. der Titel mit der Linie sollte in der Box, die im nächsten Abschnitt führt (siehe Prototyp unten)

Könnten Sie einige nachhaltigen und skalierbare Lösungen gelegt möglich sein werden? (Ich denke: svg?)

---

hier ist meine nicht-funktionierenden Prototyp:

.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; 
 
}

<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>

Answer 1

Eine Kombination aus before, after, und Opazität würde funktionieren, obwohl es nicht der eleganteste Code ist.

.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; 
 
}

<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>

Answer 2

Ich würde empfehlen, die Linie über dem Rest setzen und mit Mix-blend-Modus:

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

Dies wird die Linie führt, dass einige Überlegungen über die nehmen Farben hinter, um die endgültige Farbe zu bestimmen.

Answer 3

In meiner Antwort früher bemerkte ich „Ich habe es auf eine andere Weise tun würde“, hier ist, was ich meinte:

.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; 
 
    }

<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>