2

<h2>見出しの周りにブラケット スタイルの境界線を実装する方法を探しています。私が達成しようとしていることを正確に示す画像を添付しました。

この効果を実現するために私が考えることができる唯一の方法は、画像を使用することですが、正確にどのように行うかはわかりません（私<h2>のすべての長さ/高さはさまざまです。または、より良い方法がある場合.

ヒントと洞察は大歓迎です。

**私はこれを復活させたくありませんが、更新された画像で示されている問題の解決策として何を期待できますか? 右の行が右に行き過ぎているだけでなく、テキストの上下にいくつかの不透明度の問題があります..

括弧の境界

アップデート：更新された画像

4

4 に答える 4

2

動作するjsFiddleの例。

以下を使用してください。テキストのフォントを変更するか、画像に置き換えるだけで、境界線の色を自分の色に合わせて変更できます。HTMLの場合：

<div id="h2pre"></div>
<h2>
    <div id="h2inpre"></div>
    <div id="h2cont">Ready for the event of a lifetime?<br/>
    We'd love to hear from you.
    </div>
    <div id="h2inpos"></div>
</h2>​

CSSの場合：

h2{
   text-align:center;  
   position:relative;    
   margin-left:50%;
   left:-150px
}

div{ float:left; }

#h2inpre, #h2inpos{
   background-color:#fff;
   height:50px;
   width:20px;
   border-bottom:1px solid #FFA500;
   border-top:1px solid #FFA500;
}

#h2inpre{
       border-left:1px solid #FFA500;   
}

#h2inpos{
     border-right:1px solid #FFA500;   
    clear:right;
}

#h2cont{
 font-family:"Arial",sans-serif;
 padding:5px;
 background-color:#fff;
}

#h2pre{
   height:1px;
    width:100%;
    background-color:#FFA500;
    margin-top:25px;
    position:absolute;
    float:none;
}

</ p>

于 2012-09-14T21:35:42.140 に答える
1

html：

<h2 class="bracket"><span class="text">Ready for the event of a lifetime?<br>We'd love to hear from you.</span></h2>

css：

.bracket {
  position: relative;
  text-align: center;
  color: #999;
  font-size: 1.2em;
}
.bracket:before {/* vertical stripe */
  content: " ";
  border-top: solid 1px orange;
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
}
.bracket .text {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: .2em 1em;
  max-width: 80%;/* force that at least some of vertical stripe is still shown */
}

.bracket .text:before {/*left bracket*/
  content: " ";
  border: solid 1px orange;
  border-right: 0px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: .4em;
  right: 0;
}

.bracket .text:after {/*right bracket*/
  content: " ";
  border: solid 1px orange;
  border-left: 0px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: .4em;
  right: 0;
}

デモ： http： //jsbin.com/ibiyal/2

おそらく、テキストブロックのパディングと、左右の角かっこの幅をいじくり回す必要があります。

唯一の欠点は、それが無地の背景でのみ機能することです。

于 2012-09-14T21:59:24.793 に答える
1

それは完全に可能です。見てみましょう：http: //tinkerbin.com/zQ1VWLLi

HTML...

<h2 class="box">
  <span>Ready for the event of a lifetime? <br/> We'd love to hear from you.</span>
</h2>

CSS...

h2:before,
h2 span:before,
h2 span:after {
  content: "";
  position: absolute;
}

h2 {
  position: relative;
  font: 16px/1.2em cambria;
  text-align: center;
}

h2:before {
  top: 50%;
  height: 1px; width: 100%;
  background-color: orange;
}

h2 span {
  display: block;
  width: 50%;
  padding: 7px;
  margin: 0 auto;
  position: relative;
  background: /*same as background where it sits*/;
  border: 1px solid orange;
}

h2 span:before,
h2 span:after {
  left: 7%; right: 7%;
  height: 1px;
  background: /*same as background where it sits*/;
}

h2 span:before {
  top: -1px;
}

h2 span:after {
  bottom: -1px
}
于 2012-09-14T21:51:24.423 に答える
0

これは、HTMLとCSSを使用して行うことができます。

CSS

#container { 
   position: relative; 
   height: 43px; 
} 
#bracks { 
   background-color: #fff; 
   margin:0 auto; 
   border: 1px solid black; 
   width: 200px; 
   height: 40px; 
   position: relative; 
 }

#text { 
   background-color: #fff; 
   position: absolute; 
   width: 150; 
   left: 15; 
   height: 22px; 
   top: -1; 
   padding: 10px; 
   text-align: center;
 }

 #strike {  
   position: absolute; 
   top: 21; 
   width: 100%; 
   border-top: 1px solid black; 
 }

HTML

<div id="container">
  <div id="strike">&nbsp;</div>
  <div id="bracks">
    <div id="text">Some text here.</div>
  </div>
</div>
于 2012-09-14T22:01:22.723 に答える