css - 复制此CSS格式

似乎我需要AngularJS来编写此代码，但我希望具有CSS技能的人可以轻松地复制此代码。

我试图在另一个只是HTML页面的站点上重复此操作。

它在此站点上：http://sarasparodandgun.org/pages/saraspa

它是标题“ SARASPA HOME”，其后为“渐变”灰色。灰色反应灵敏。我试过使用title和decoration css，但是它对我来说并不正确。我确定它与block-header，ng-scope和ng-binding有关，但在萤火虫上看不到它。

<div class="block-header ng-scope">
  <h2>
    <span class="title ng-binding"> SaraSpa Home </span>
    <span class="decoration"></span>
    <span class="decoration"></span>
    <span class="decoration"></span>
  </h2>
</div>

谢谢

最佳答案

灰色背景位于h2上。白色虚线穿过灰色是装饰范围。

样式中没有需要Angular的内容

以下是相关规则：

.block-header h2 {
  background: #eee none repeat scroll 0 0;
  color: #515151;
  font-family: "Lato",sans-serif;
  font-size: 24px;
  font-weight: 300;
  margin: 40px 0;
  text-transform: uppercase;
}
.block-header h2 .title {
  background: #fff none repeat scroll 0 0;
  padding: 0 15px 0 0;
}
.block-header h2 .decoration {
  background: #fff none repeat scroll 0 0;
  margin-left: 5px;
  padding-left: 3px;
}

这是效果的小提琴：
http://jsfiddle.net/yjnu3ypz/