CSS Border Schatten Auf der einen Seite der Grenze

Question

Hallo Jungs, ich brauche ein Schatten Überschrift wie diese zu machen, ich bin zu verstehen, nicht in der Lage, wie ich es machen kann. das ist, was ich bis jetzt erreichen kann, meine wirkliche Sorge ist der Schatten am Ende der Linien. Dank

.divider { 
 
    color: #282837; 
 
    width: 70%; 
 
    margin: 20px auto; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    line-height: 1.2em; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    font-weight: 400; 
 
} 
 

 

 
.divider:before, .divider:after { 
 
    content: ""; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    width: 15%; 
 
    border-bottom: 1px dashed #9A9A9A; 
 
    margin: 0 2% 0 -55%; 
 
}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>

Answer 1

, dies zu tun, müssen Sie Position Eigenschaft verwenden und Hintergrundbild zu verwenden, anstatt Grenze

.divider { 
 
    color: #282837; 
 
    width: 70%; 
 
    margin: 20px auto; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    line-height: 1.2em; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    font-weight: 400; 
 
position: relative; 
 
} 
 

 
.divider-2 { color: red; } 
 

 
.divider:before { 
 
    content: ""; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    width: 15%; 
 
    border-bottom: 1px dashed #9A9A9A; 
 
position: absolute; 
 
top: 20px; 
 
left: 0px; 
 
} 
 

 
.divider:after { 
 
content: ""; 
 
vertical-align: middle; 
 
display: inline-block; 
 
width: 15%; 
 
border-bottom: 1px dashed #9A9A9A; 
 
position: absolute; 
 
right: 0; 
 
top: 20px;}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>

Answer 2

.divider { 
 
color: #282837; 
 
position:relative; 
 
width: 70%; 
 
margin: 20px auto; 
 
overflow: hidden; 
 
text-align: center; 
 
line-height: 1.2em; 
 
font-size: 30px; 
 
text-transform: uppercase; 
 
font-weight: 400; 
 
} 
 
.divider:before, .divider:after { 
 
content: ""; 
 
width: 15%; 
 
border-bottom: 1px dashed #9A9A9A; 
 
position: absolute; 
 
top: 50%; 
 
transform: translateY(-50%); 
 
} 
 
.divider:after { 
 
right: 0; 
 
} 
 
.divider:before { 
 
left: 0; 
 
}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>

Answer 3

.divider { 
 
    color: #282837; 
 
    width: 70%; 
 
    margin: 20px auto; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    line-height: 1.2em; 
 
    font-size: 30px; 
 
    text-transform: uppercase; 
 
    font-weight: 400; 
 
} 
 

 

 
.divider:before, .divider:after { 
 
    content: ""; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    width: 15%; 
 
    height: 1px; 
 
    background: linear-gradient(to right, transparent 50%, #ffffff 50%), 
 
       linear-gradient(to right, #ffffff, #000000); 
 
    background-size: 8px 1px, 100% 1px; 
 
    margin: 0; 
 
} 
 
.divider:after { 
 
    background: linear-gradient(to right, transparent 50%, #ffffff 50%), 
 
       linear-gradient(to left, #ffffff, #000000); 
 
    background-size: 8px 1px, 100% 1px; 
 
}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>

Sie können dies mit Hintergrund-Bild Stapel auszukommen. In der ersten Ebene definieren Sie die selbst gepunktet:

background: linear-gradient(to right, transparent 50%, #ffffff 50%), 

in dem zweiten die ganze Steigung:

linear-gradient(to right, #ffffff, #000000); 

als den zweiten Spiegel wiederholen:

linear-gradient(to left, #ffffff, #000000);