来自边的标题的CSS条纹

Question

我有这个设计，我必须编码为HTML，但我被困在标题部分。这就是我想要做的事情：

因此，在创建带标题的内容时，这些条纹会根据标题的长度自动调整。可能的？

Answer 1

结帐此链接，如果此功能正常，请尝试此demo

[http://jsfiddle.net/3Vqjg/]

Updated Demo

<div class="h-border">
  <div class="heading">
    <h2>About Me</h2>
  </div>
</div>

.h-border {
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 30px;
margin-bottom: 10px;
}

.heading {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
/*background-image: url(../img/cross-pattern.png);
background-repeat: repeat;*/
background: #f00;
}

h2 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
text-transform: uppercase;
margin: 0 auto;
padding: 0 10px;
background:#fff;
width:30%;
display: inline;
}