異なる適応的な行を持つ見出し

Question

さまざまなサイズの見出しを作成し、それらの側に適応性の異なる種類の行を作成したいと考えています。 右から左に1つずつ左から右に移動します。

どうすればいいですか？

ここにはCodePenという表現があります。

<div class="container"> 
    <h1 class="title-stripes">Title 1</h1><br /> 
    <h1 class="title-stripes">This is a bigger title</h1><br /> 
    <h1 class="title-stripes">Small</h1> 
</div> 

ストライプの背景画像は、それらの内側の三角形の両方を有し、一方は右から左へ、他方左から右へ行きます。ソリューション

Answer 1

ちょうど置き換える：

.title-stripes:before { 
    background: url(http://i64.tinypic.com/2ugnc53.png); 
    right: 100%; 
} 

で：

.title-stripes:before { 
    background: url(http://i64.tinypic.com/346nxu8.png); 
    right: 100%; 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 

Answer 2

と

UPDATE CodePen私はそれはあなたが適応によって何を意味するかに依存しているとします。 SVGの理想的な仕事のように聞こえる。いくつかのSVGを作成し、目的の効果に応じて操作することができるはずです

Answer 3

さらに多くのマークアップが必要です。 <span>またはこれらのヘッダータグ内に何かを設定して、スパンにスタイルを追加する必要があります。ここで、アクセントヘッダを作成する方法を示します。彼らは反応して、フォントサイズでフレックスします。

http://codepen.io/anon/pen/Eyvbwp

HTML：

<h2 class="accent-double text-center"><span>Hello World</span></h2> 

CSS [LESS]：

.accent-double { 
overflow: hidden; 
text-align:center; 
span{ 
    display: inline-block; 
    position: relative; 
    &:before{ 
    right: 100%; 
    margin-right: 0.5em; 
    content: ""; 
    position: absolute; 
    top: 50%; 
    height: 3px; 
    width: 9999px; 
    display: block; 
    margin-top: -2px; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    } 
    &:after{ 
    left: 100%; 
    margin-left: 0.5em; 
    content: ""; 
    position: absolute; 
    top: 50%; 
    height: 3px; 
    width: 9999px; 
    display: block; 
    margin-top: -2px; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    } 
} 
}