CSSを使って書式設定されたhtmlヘッダを作成する

Question

私は自分のホームページにいくつかの書式設定されたヘッダを作成しています。私はこのタイプのヘッダーの上に落ちて、このようなCSSを作成することが可能かどうか疑問に思っていました。私はBootstrapスタイルを使用しています。

それは非常に弱いかもしれませんが、ヘッダは、それは、コンテナの残りの部分を埋め、次の縞模様の「バー」を持っています。私はそれを探してみましたが、ヘッダーの前後にある行を中心にしたヘッダーしか見つかりませんでした。ヘッダーの種類は、ヘッダーの2行だけです（ヘッダーの上部に1つ、ヘッダーの下部に1つ）。

ヘッダは.containerの内側に配置されており、私は.containerの全長にヘッダ長をしたい：

<div class="container"> 
    <h3><span>Projects</span></h3> 
</div> 

JSFiddle：事前にhttps://jsfiddle.net/ozxk82j1/1/

ありがとう！

Answer 1

まず、HTMLが無効です。 spanがinlineの場合、ブロックレベルであるため、h3を含めることはできません。それ以外

擬似要素は、繰り返しの直線勾配で、ここで結構です：

あなたは、絶対に擬似要素を配置することに非常に長い幅を与え、h3ためにoverflow:hiddenを適用することができますが、フレキシボックスを使用して実施例任意の... erm、オーバーフロー。

h3 { 
 
    display: flex; 
 
} 
 
h3::after { 
 
    content: ''; 
 
    background: repeating-linear-gradient(135deg, 
 
    transparent, transparent 2px, 
 
    lightgrey 4px, lightgrey 6px); 
 
    flex: 1; 
 
    margin-left: .25em; 
 
}

<div class="container"> 
 
    <h3>Projects</h3> 
 
    <h3>Lorem ipsum dolor ipsum.</h3> 
 
</div>

擬似要素の高さは、スイートに調整することができる（align-items:centerを垂直中心それを維持する）および「行」の不透明度は、RGBA色を使用することによって調整することができます。私たちは、コードを見ることができるので、あなたは、リンクを最近使ったプロジェクトを見た

h3 { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
h3::after { 
 
    content: ''; 
 
    
 
    background: repeating-linear-gradient(135deg, 
 
    transparent, transparent 2px, 
 
    rgba(0,0,0,0.1) 4px, rgba(0,0,0,0.1) 6px); 
 
    
 
    height:.5em; 
 
    flex: 1; 
 
    margin-left: .25em; 
 
}

<div class="container"> 
 
    <h3>Projects</h3> 
 
    <h3>Lorem ipsum dolor ipsum.</h3> 
 
</div>