CSS besseren Stil Überschrift Element

Question

Bitte helfen Sie mir. Wie geschnittenen Ecken mit CSS wird nun einfügen als Hintergrundbild background: url(../images/border.png) no-repeat center;

HTML-Code:

<div class="heading"> 
    <h1>About Us</h1> 
</div> 

CSS-Code:

.heading { 
    text-transform: uppercase; 
    position: relative; 
    background: #000000 
} 

.heading h1 { 
    text-align: center; 
    overflow: hidden; 
    color: #fff; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    font: 30px/32px 'Roboto', sans-serif; 
    padding: 100px 0;; 
    background: url(../images/border.png) no-repeat center; 
} 
.heading h1:before, 
.heading h1:after { 
    content: ''; 
    width: 100%; 
    display: inline-block; 
    border-bottom: 1px solid; 
    height: 0; 
    vertical-align: middle; 
} 
.heading h1:before { 
    margin-left: -100%; 
    margin-right: 80px; 
} 
.heading h1:after { 
    margin-left: 80px; 
    margin-right: -100%; 
} 

Answer 1

Sie einen Versuch geben könnte linear Steigung und Umwandlung demo to play with

header { 
 
    background: #333; 
 
    display: flex; 
 
    color: white; 
 
} 
 
header:before, 
 
header:after { 
 
    content: ''; 
 
    margin: auto 1em; 
 
    border-bottom: solid 1px; 
 
    flex: 1; 
 
} 
 
h1 { 
 
    position: relative; 
 
    padding: 0.25em 1em; 
 
    overflow: hidden; 
 
    background: linear-gradient(white, white) no-repeat top center, linear-gradient(white, white) no-repeat bottom center; 
 
    background-size: calc(100% - 1.7em) 1px; 
 
} 
 
h1:before, 
 
h1:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    border: solid 1px; 
 
    border-top: none; 
 
    border-bottom: none; 
 
    transform: skew(45deg) 
 
} 
 
h1:after { 
 
    transform: skew(-45deg) 
 
}

<header> 
 
    <h1>about us </h1> 
 
</header>

Sie Aktuellefarbe, Text leicht & Grenzen Farben ändern verwenden:

header { 
 
    background: #333; 
 
    display: flex; 
 
    color: white; 
 
} 
 
header + header { 
 
    color: pink; 
 
} 
 
header + header + header { 
 
    color: gold; 
 
} 
 
header:before, 
 
header:after { 
 
    content: ''; 
 
    margin: auto 1em; 
 
    border-bottom: solid 1px; 
 
    flex: 1; 
 
} 
 
h1 { 
 
    position: relative; 
 
    padding: 0.25em 1em; 
 
    overflow: hidden; 
 
    background: linear-gradient(currentcolor, currentcolor) no-repeat top center, linear-gradient(currentcolor, currentcolor) no-repeat bottom center; 
 
    background-size: calc(100% - 1.65em) 1px; 
 
} 
 
h1:before, 
 
h1:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    border: solid 1px; 
 
    border-top: none; 
 
    border-bottom: none; 
 
    transform: skew(45deg) 
 
} 
 
h1:after { 
 
    transform: skew(-45deg) 
 
}

<header> 
 
    <h1>about us </h1> 
 
</header> 
 
<header> 
 
    <h1>about us a bit longer</h1> 
 
</header> 
 
<header> 
 
    <h1>& different color</h1> 
 
</header>