Question

我正在寻找一种在我的<h2>标题周围实现支架式边框的方法;我附上了一张图片，显示了我正在努力完成的事情。

我能想到实现这种效果的唯一方法是使用图像，但我不确定如何这样做（我的所有<h2>都有不同的长度/高度，或者如果可能的话有更好的方法。

任何提示＆amp;非常感谢您的见解。

**我讨厌复活这个，但是我能看到什么才能解决他更新图像所显示的问题？右边太右了，以及文本上下的一些不透明度问题..

bracket borders

更新： updated image

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>

支架式边框元素

4 个答案:

CSS

HTML