1

特定のテキストの両側にパターンが走っているウェブサイトのセクションをスタイル設定しようとしています。ここで PSD ファイルから取得したスクリーンショットをご覧ください --> http://screencast.com/t/84RCLRdSZT赤い矢印は、解決が難しい問題の領域を指しています。

これについてどうすればいいですか？

これが私が始めていることです：

<div class="box">
    <h2>Some text here</h2>
</div>

そしてCSS：

.box {
  width:400px;
  height:200px;
  text-align:center;
  background:yellow;
}

h2:after,h2:before{
  content:"";
  border:5px double purple;
}

ここにフィドルがあります-> http://jsfiddle.net/HerrLoop/g63LB/1/

ご覧のとおり、最初のスクリーンショットでわかるように、ストライプは水平ではなく垂直です。

4

2 に答える 2

3

これは完全ではなく、前後の要素に固定幅を設定する必要があります (レスポンシブが必要な場合は JavaScript を使用するのが最善だと思います) が、次のようになります。

h2{
    display:inline-block;
    vertical-align:middle;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:50px;
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/daCrosby/g63LB/2/

編集

これはもう少し応答性が高いですが、それでも小さなサイズでは途切れてしまい、他のサイズでは不均衡に見えます:

.box {
    width:50%;
    overflow:hidden;
}
h2{
    display:inline-block;
    vertical-align:middle;
    width:100%;
    white-space:nowrap;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:20%;
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/daCrosby/g63LB/3/

于 2013-07-07T06:11:36.843 に答える
2

ここで説明されている解決策を試してください: http://kizu.ru/en/fun/legends-and-headings/

簡単なデモ:

h2{
    overflow-x: hidden;
    white-space: nowrap;
    text-align: center;
}
h2:before, h2:after {
    content: "";
    border: solid #000;
    border-width: 1px 0;
    height: 5px;
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}
h2:before { margin: 0 .5em 0 -50%; }
h2:after { margin: 0 -50% 0 .5em; }
于 2013-07-07T10:06:00.223 に答える