css - このスタイリングをcssで作る方法

Question

互換性があり、見栄えがよく、応答性が高いのはどうすれば可能ですか？背景付きの H2 ボックスを作成すると思いますが、背景とのやり取りで多くの問題が発生します... png がたくさんあります。純粋なCSS、パディング、マージンなどでそれを行う方法を好みます

フル解像度の画像 (テクスチャも参照)

Answer 1

これは、背景色を設定することなく、選択した意味的に適切な要素で実行できます。

http://cssdeck.com/labs/n2z0icvf

<h1>Technique</h1>

h1 {
  overflow: hidden;
  padding-left: 2em;
}

h1:before,
h1:after {
  content: " ";
  display: inline-block;
  border-bottom: 2px solid;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
  width: 100%;
}

Answer 2

作業フィドル: http://jsfiddle.net/58JCY/

HTML:

<fieldset>
    <legend>LEVE TECHNIQUE</legend>
</fieldset>

CSS:

fieldset {
    border:none;
    border-top: 1px solid #999;
}
legend {
    padding: 0 5px;
}