元素周围的括号样式边框

Question

我正在寻找一种在我的 <h2> 标题周围实现括号样式边框的方法；我附上了一张图片，准确地展示了我想要完成的工作。

我能想到的实现这种效果的唯一方法是使用图像，但我不确定具体该怎么做（我所有的<h2>s 的长度/高度都不同，或者是否有更好的方法。

非常感谢任何提示和见解。

**我不想复活这个，但是我可以期待什么作为更新图像中显示的问题的解决方案？右边的线太靠右了，还有文字上下有些不透明的问题..

更新：

Answer 1

Working jsFiddle example.

使用以下内容。您只需要更改文本的字体或将其替换为图像，并且可能更改边框的颜色以匹配您的。 对于 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;
}

​

Answer 2

这是完全可能的。看一看：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
}

Answer 3

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

您可能需要修改文本块的填充，以及左右括号的宽度。

唯一的缺点是它只适用于纯色背景。

Answer 4

您可以使用 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>